CODEWITHSUNDEEP
javascriptarraysreactjsjsx
brohymn
brohymn

Reputation: 460

Retrieve clicked array item on React Component

I have a Search component that outputs values from an array to a ResultItem child component, every child component has a button with a onClick property on it. I bound a function to the button to get the value of an array item that I clicked.

What I have working is that every time I clicked on every single ResultItem button I get values of 0,1,2,3,4,5,6 individually which is perfect but I dont need the array indexes I need the values of those indexes

class ResultItem extends Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick
  }

  handleClick(index) {

    // index = this.props.applications[0]
    // index = this.props.applications.map(obj => obj.videoId[0])
    console.log('this click', index)
  }


  render() {
    // console.log ('myProps', this.props.applications[0]);

    const {applications} = this.props;

    return (

      <div>
        {
          applications.map((app, k) => {

            return (
              <Card key={k} style={styles.appCard}>
                <CardMedia style={styles.appMedia}>
                  <div>
                    <Drafts color={white} style={styles.iconer}/>
                  </div>
                </CardMedia>

                <CardTitle key={k} title={app.videoId} subtitle="Application"/>
                 {/* <div key={k}><h3>{app}</h3></div> */}
                <CardText>
                  <div>
                    <div>Status:
                      <b>test</b>
                    </div>
                  </div>
                </CardText>

                <FloatingActionButton
                  style={styles.addButton}
                  backgroundColor={'#CC0000'}
                  onClick={this.handleClick.bind(this, k)}
                >
                  <ContentAdd/>
                </FloatingActionButton>
              </Card>

          )
        })
      }
      </div>
    );
  }
}

What I've tried so far:

if I use:

index = this.props.applications[0]

I get the first value of the array on ALL buttons I click on and

If I use: 

index = this.props.applications.map(obj => obj.videoId[0])

I get the first letter of every single item of the array inside another array on every click, Is there any way I can get the value of the element I've clicked on , if so how?

Upvotes: 2

Views: 4961

Answers (2)

jonahe
jonahe

Reputation: 5000

When you map over an array you provide a function where the first argument is the current item, and the second one is the current index (of that item).

someArray.map((currentItem, currentIndex) => /* do stuff */ )

If you just care about the item, then there is no need to involve the index. You could just pass the current item directly to handleClick.

render() {

const {applications} = this.props;

return (

  <div>
    {
      applications.map((item) => {

            <FloatingActionButton
              style={styles.addButton}
              backgroundColor={'#CC0000'}
              onClick={ this.handleClick.bind(this, item) }
            >
          </Card>

      )
    })
  }
  </div>
);

handleClick would then deal directly with the item, not the index. If you still want to use indexes, perhaps because that's nice to have if you need to manipulate the array at some later stage, then the index (second argument), let's call it index, could be passed to handleClick as before, and you would use that index to find the relevant item with

const clickedItem = this.props.applications[index]

Upvotes: 3

Michiel
Michiel

Reputation: 1006

index = this.props.applications[index]

or

index = this.props.applications[index].videoid

Upvotes: 1

Related Questions