"React js" How to pass array data using props?

Question

render() {
   const Array = this.props.students.map((data) => {
      return (
         <button 
           key={data.name}
           //key={data.birthDate}
           //key={data.age}
           //key={data.class}
         >{data.name}</button>
      );
   });

   return (
     <div>
       {Array}
       <StudentInfo name = {"Amira"}/>
     </div> 
   );
}

This is my code. Currently I'm trying to pass array data from that <button></button> into <StudentInfo /> and replace the name = {"Amira"} Can anyone help me with this?

Thank you.

Actually I want to do something like this <StudentInfo name = {data.name}/> is it possible? I want the data from the button.{data.name} to be pass to <StudentInfo> but i got error when do this. — The Queen
– The Queen, Commented Jan 26, 2018 at 1:15

Tiago B · Accepted Answer · 2018-01-26 01:22:57Z

1

this might be your answer: How to pass an array of items in REACT.js

edited Jan 26, 2018 at 1:22

answered Jan 26, 2018 at 0:57

Tiago B

2,09519 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

The Queen Over a year ago

and actually I want to do something like this <StudentInfo name = {data.name}/> is it possible?

The Queen Over a year ago

I want the data from the button.{data.name} but i got error when do this

Tiago B Over a year ago

What error are you facing? Check your browser console log and add it to your question, please.

The Queen Over a year ago

passing error : unexpected token var and it also said that code is not valid

Nilesh Singh · Accepted Answer · 2018-01-26 01:36:29Z

1

Doing this will solve the issue,

render() {
   const nameArray = [];
   const Array = this.props.students.map((data) => {
      nameArray.push(data.name); //fill the array with names
      return (
         <button 
           key={data.name}
           //key={data.birthDate}
           //key={data.age}
           //key={data.class}
         >{data.name}</button>
      );
   });

   return (
     <div>
       {Array}
       <StudentInfo name = {nameArray}/>
     </div> 
   );
}

answered Jan 26, 2018 at 1:36

Nilesh Singh

1,7401 gold badge18 silver badges30 bronze badges

2 Comments

The Queen Over a year ago

But How if I want it when we click on a button, only data about that person will be display?

Nilesh Singh Over a year ago

For a button click, you need to add that logic to your question first by editing it.

Marcell Monteiro Cruz · Accepted Answer · 2018-01-26 16:17:30Z

0

What you want to do is something like this

constructor(props){
  super(props);
  this.students = [
    {name: 'john'},
    {name: 'paul'},
    {name: 'clara'}
  ];      
  this.state = {
    selectedStudent: this.students[0]
  }
  this.selectStudent = this.selectStudent.bind(this);
}

selectStudent(student){
  this.setState({selectedStudent: student});
}

render(){
  return (
    <div>
      {this.students.map((student, i) => (
        <button key={i}
          onClick={() => this.selectStudent(student)}
        >{student.name}</button>
      ))}
      <h1>{this.state.selectedStudent.name}</h1>
    </div>
  );
}

online demo: https://codesandbox.io/s/91wp5j33pw

answered Jan 26, 2018 at 16:17

Marcell Monteiro Cruz

3471 silver badge7 bronze badges

Collectives™ on Stack Overflow

"React js" How to pass array data using props?

3 Answers 3

4 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related