Pass state value from one component to another - reactjs

Question

I have an array in the parent component, and I want to pass this state value to another componenet which will the props for another component.
import React, { Component } from "react";
import Bookings from "./components/Bookings";
import Meals from "./components/Meals";
import Error from "./components/Error";
class App extends Component {
state = {
values: [{ name: "John Doe", date: "2017-09-15" }]
};
handleGuestInfo = () => {
console.log("Here");
//console.log(this.state.name, "here");
};
render() {
return (
<div className="container-fluid">
<center>
<h2>Hacker Hostel</h2>
</center>
<div className="container">
<Bookings onGuestChange={this.handleGuestInfo} />
<Error />
<Meals name={this.state.values} date={this.state.values} />
</div>
</div>
);
}
}
export default App;
import React, { Component } from "react";
class Meals extends Component {
render() {
return (
<div className="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<ol id="list">
<div>
<li className="morning">
Breakfast for {this.props.name} on {this.props.date}
</li>
<li className="afternoon">Lunch for insert_hacker_name</li>
<li className="night">Dinner for insert_hacker_name</li>
</div>
</ol>
</div>
);
}
}
export default Meals;
Any help will be appreciated, I want to get name and date to the meals.js file from app.js, I am able to pass value for function.

Answer 1

You can map over values state and render the Meal component according to that.
class App extends React.Component {
state = {
values: [{ name: "John Doe", date: "2017-09-15" }]
};
handleGuestInfo = () => {
console.log("Here");
//console.log(this.state.name, "here");
};
render() {
return (
<div className="container-fluid">
<center>
<h2>Hacker Hostel</h2>
</center>
<div className="container">
{this.state.values.map(value =>(
<Meals key={value.name} name={value.name} date={value.date} />
))}
</div>
</div>
);
}
}
class Meals extends React.Component {
render() {
return (
<div className="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<ol id="list">
<div>
{this.props.valuy}
<li className="morning">
Breakfast for {this.props.name} on {this.props.date}
</li>
<li className="afternoon">Lunch for insert_hacker_name</li>
<li className="night">Dinner for insert_hacker_name</li>
</div>
</ol>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root" />