是否存在用于在数组中查找json对象的当前索引的函数？

Question

At onClick i want to memorize the name in localStorage but i can't figure out how to send as parametr the correct object from array

myFunction(value){
    console.log(value)
    localStorage.setItem('name', value)
}

render() {
    var { isLoaded, items} = this.state;

    if (!isLoaded){
        return <div>Loading...</div>
    }else {
        return (
            <Container>

                <Jumbotron>
                    <h1 align="center">The Clinicum</h1>
                </Jumbotron>



                <Row>
                    {items.map(row =>(
                        <Col  key={row.iddoctor}>
                            <Image src= {require(`./photos/${row.photoLink}.jpg`)} 
                             roundedCircle onClick={() 
                             => this.myFunction(this.state.items.name)} />
                        </Col>
                    ))}
                </Row>

if i use this.state.items the console.log return the hole json correctly so everything else is working just fine, maybe a stupid question but i am pretty noob in js and i can't find the answer

Answer 1

Do it like this

myFunction(value){
    console.log(value)
    localStorage.setItem('name', value)
}

render() {
    var { isLoaded, items} = this.state;

    if (!isLoaded){
        return <div>Loading...</div>
    }else {
        return (
            <Container>

                <Jumbotron>
                    <h1 align="center">The Clinicum</h1>
                </Jumbotron>



                <Row>
                    {items.map(row =>(
                        <Col  key={row.iddoctor}>
                            <Image src= {require(`./photos/${row.photoLink}.jpg`)} 
                             roundedCircle onClick={() 
                             => this.myFunction(row.name)} />
                        </Col>
                    ))}
                </Row>

Answer 2

If I understand correctly, you're wanting to save the name of the item that corresponds to the clicked item, to localStorage .

One way to achieve that would be to modify your render code as follows:

<Row>
    {items.map((row) =>(
        <Col  key={row.iddoctor}>
            <Image src= {require(`./photos/${row.photoLink}.jpg`)} 
                roundedCircle onClick={() => this.myFunction(row.name)} />
        </Col>
    ))}
</Row>

You can also access the index of the current row item being rendered via the second argument passed to the mapping callback:

<Row>
    {items.map((row, rowIndex) =>(
        <Col  key={row.iddoctor}>
            <Image src= {require(`./photos/${row.photoLink}.jpg`)} 
                roundedCircle onClick={() => this.myFunction(this.state.items[rowIndex].name)} />
        </Col>
    ))}
</Row>

Hope these pointers help!