Состояние и свойства компонента React - PullRequest
Новая
       2

Состояние и свойства компонента React

0 голосов
/ 27 мая 2020

надеюсь, у вас все хорошо! Мне нужна помощь со следующим кодом. Я бы с удовольствием показал на экране угаданное имя и угаданный подарок следующим образом: Имя: Боб и Подарок: Шампанское. Но я не знаю, как заставить этот номинал работать

Имя: {this.props.guest.name} Подарок: {this.props.guest.gift}

Спасибо за помощь, ребята! 

class App extends React.Component {

constructor(props) {
super(props);

this.state = {
  partyType: "birthday",
  entertainment: "clowns",
  venue: {
    name: "Polly's Party Palace",
    capacity: 120,
    address: '35, Rue Borno'
  },
  guessesList: [
    {
      id: 0,
      name: 'Bob',
      gift: 'Champaign',
    },
    {
      id: 1,
      name: 'Marie',
      gift: 'Chocolate cake',
    },
    {
      id: 2,
      name: 'Max',
      gift: 'Gift box',
    },
    {
      id: 3,
      name: 'Melinda',
      gift: 'Flowers',
    }
  ]
};

  }

renderListOfGuest(guessesList) {
return (
  <div>
    {guessesList.map(guest => <div key={guest.id}> {guest.name}  </div>)}
  </div>
);
}

render() {
  return (
  <div >
    <Party partyType={this.state.partyType} entertainment={this.state.entertainment} venue={this.state.venue} guestList={this.renderListOfGuest(this.state.guessesList)} />
  </div>
);
 }
}

class Party extends React.Component {
  render() {
    return(
   <div> 
      <h3> Parti Time! </h3>
      <p>This {this.props.partyType} party will be held at {this.props.venue.name} with a maximum capacity of {this.props.venue.capacity}.</p>
      <p>Featured entertainment: {this.props.entertainment}!</p>
     <p>
       The venue address is: {this.props.venue.address}.
     </p>
     <div>
     <h4>Guest List</h4>
     <p> Name: {this.props.guest.name} <br />
     Gift: {this.props.guest.gift} 
     </p>
    </div>
    </div>
  );
    }
 }

ReactDOM.render(<App />, document.getElementById('root'));
...