How to retrieve one element that meet certain condition from list?

[merry rapids]

that should work

you're not wrapping it in a lot of the stuff you were before though

[somber sedge]

@merry rapids it gives me this error

[merry rapids]

what is StoreItemProps and what's storeItems' type

[somber sedge]

here is the complete code that is not working

// code here 
import React, { useEffect, useState } from 'react'
import BarcodeScannerComponent from "react-qr-barcode-scanner";
import { StoreItem } from "../components/StoreItem"
import storeItems from "../data/items.json"
import { Fab, TextareaAutosize } from '@material-ui/core'

// the below code is not working 
//I want to Scan Barcode and take it as input then loop on all items to filter the item with that barcode to retun the corresponding StoreItem card !

export function Scan() {
  const [barcode, setbarcode] = React.useState("");
  const item = storeItems.find(i => i.barcode === barcode)
  console.log(item);


  // check if barcode exists then retrieve item for barcode 
  useEffect(() => {
    if (!barcode) return;
    if (item) {
      console.log("Item for this barcode available below");
      console.log(item);
    } else {
      console.log("No Item for this barcode available");
    }

  }, [barcode]);


  return (
    <div>
      <span>Scan</span>
      <center>
        <div style={{ marginTop: 10 }}>
          <BarcodeScannerComponent
            width={400}
            height={400}
            onUpdate={(err, result) => {
              if (result) setbarcode(result.toString);
            }}
          />
        </div>

      </center>
      <TextareaAutosize
        style={{ fontSize: 18, width: 320, height: 50, marginTop: 1 }}
        rowsMax={4}
        defaultValue={barcode}
        value={barcode}
      />
      <div >
        <StoreItem{...item} />
      </div>

    </div>

  );
}
export default Scan;

@merry rapids

[merry rapids]

ok that's not what i asked for though

[somber sedge]

@merry rapids I think if I share the code with you everything will be clear but to save your time .....how to make the working code that i share in the first post list only one item instead of all of them

[merry rapids]

like you have

that's literally how

[merry rapids]

.

[somber sedge]

Can I share the complete code code with you ? this will be easier

[merry rapids]

no just answer the question

it'll be easier for you but then i have to go through an unknown codebase 💀

[merry rapids]

!screenshot

[minor hollow]

`!screenshot`:

Rather than screenshots, please provide either code formatted as:

```ts
// code here
```
Or even better, as an example on the TypeScript playground that is as simple as possible and reproduces the issue. This makes it easier to help you and increases the chances of getting an answer.

[somber sedge]

here it is

@merry rapids

[merry rapids]

goddammit

this doesn't even have what i was asking for

it isn't even what the tag said to do 💀

and please stop pinging me

[somber sedge]

Sorry I am new here

you asked me what is StoreItemProps ```ts
// code here
type StoreItemProps = {
id: number,
name: string,
price: number,
barcode: string,
imgUrl: string

}