React js Как передать данные массива с помощью реквизита?

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> 
   );
}

Это мой код. В настоящее время я пытаюсь передать данные массива из этого <button></button> в <StudentInfo /> и заменить name = {"Amira"} Может ли кто-нибудь помочь мне с этим?

Спасибо.


reactjs react-props
person The Queen    schedule 26.01.2018    source источник
comment
Пожалуйста, будьте немного подробнее в отношении того, что вы спрашиваете.   -  person Nilesh Singh    schedule 26.01.2018
comment
На самом деле я хочу сделать что-то вроде этого ‹StudentInfo name = {data.name}/› это возможно? Я хочу, чтобы данные с кнопки {data.name} передавались в ‹StudentInfo›, но при этом я получил ошибку.   -  person The Queen    schedule 26.01.2018
comment
Итак, вам нужен один data.name или полный массив?   -  person Nilesh Singh    schedule 26.01.2018
comment
полный массив   -  person The Queen    schedule 26.01.2018

Ответы (3)


arrow_upward
1
arrow_downward

это может быть ваш ответ: Как передать массив элементов в REACT.js

person TiagoBrenck    schedule 26.01.2018
comment
и на самом деле я хочу сделать что-то вроде этого ‹StudentInfo name = {data.name}/› это возможно? - person The Queen; 26.01.2018
comment
Мне нужны данные с кнопки. {data.name}, но я получаю сообщение об ошибке, когда делаю это - person The Queen; 26.01.2018
comment
С какой ошибкой вы столкнулись? Проверьте журнал консоли браузера и добавьте его к своему вопросу, пожалуйста. - person TiagoBrenck; 26.01.2018
comment
ошибка передачи: неожиданный токен var, и он также сказал, что код недействителен - person The Queen; 26.01.2018

arrow_upward
1
arrow_downward

Это решит проблему,

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> 
   );
}
person Nilesh Singh    schedule 26.01.2018
comment
Но как, если я хочу, чтобы при нажатии на кнопку отображались только данные об этом человеке? - person The Queen; 26.01.2018
comment
Для нажатия кнопки вам нужно сначала добавить эту логику в свой вопрос, отредактировав его. - person Nilesh Singh; 26.01.2018

arrow_upward
0
arrow_downward

Что вы хотите сделать, это что-то вроде этого

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>
  );
}

онлайн-демонстрация: https://codesandbox.io/s/91wp5j33pw

person Marcell Monteiro Cruz    schedule 26.01.2018