Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

201
Views
How Can I target single item by map button in React Typescript?

So I have a functional components here:

export default function Test() {
    const [products, setProduct] = useState<any>([]);
    const [image, setImage] = useState<any>([""]);
    const [prices, setPrice] = useState<any>([]);
    const [showPrice, setShowPrice] = useState<boolean>(false);
    const [PhonePrice, setPhonePrice] = useState<any>("");


    useEffect(() => {
        async function loadProducts() {
            const res = await fetch("http://raw.githubusercontent.com/reborn094/Practice/main/data.json", {
                method: "GET",
            });
            const json = await res.json();
            const data = json.products;

            setProduct(data);

    return (
        <div>
                    {products.map((product: any, index: number) => {
                        return (
                            <Col>
                                <Card key={index} style={{ width: "20rem" }}>
                                    <Card.Body>
                                        <Card.Title>
                                        </Card.Title>
                                        <Card.Title>
                                            <Child ProductImage={image[index]} name={product.name} code={product.code}  onSelectProduct={()=>{  
                                             

> 

what should I write here????
------------------------

   
                                            }}
                                            ></Child>
                                           
                                        </Card.Title>
                                        <Card.Text></Card.Text>
                                    </Card.Body>
                                </Card>
                            </Col>
                        );
                    })}
        </div>
    );
}

And here is my Child components :

export default function Child(props:{
    onSelectProduct?:()=> void;
}) {
  return (
      <div>
        <Button onClick={props.onSelectProduct}></Button>
    </div>
  )
}

My question is What if I want to set button in Test components to target single item in list, what should I do? Because Now If I set Button that Button would trigger all item.What should I do in the function onSelectProduct?

about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!