title: issue to make a component add a new component
body: <p>I am building a restaurant review website with react js,html and css. I need to make a child component RestaurantInput update a sibling component Restaurant list.
  I created handlers which pass informations to App component(the parent) by a callback and when there is an input change in the RestaurantInput it get updated by the handlers. The App component pass then the information to RestaurantList component by props which will render the new restaurant on the UI.
  Unfortunatly there is no rendering of the new restaurant . I do not know where i got it wrong. Is there anyone who can help?</p>
  
  <p>I have tried to console log the Restaurants imported from a Json at my local pc. But it look like it was not updated either.
  I went to the React js documentation but did not get any clear answer either.
  Many solution are for when there is a proper JSON file from the back end and I could not figure out how to apply them in my current situation.</p>
  
  <p>RestauranInput.jsx:</p>
  
  <pre><code>handlechange(e){
  
      const name=e.target.name;
      const value=e.target.value;
      this.setState((prevState)=&gt;{
                        prevState.restaurant[name]=value;
                        return{restaurant:prevState.restaurant};
                      });
       }
  
  handleSave=(e)=&gt;{
  
      this.props.onSave(this.state.restaurant);
      this.setState({
          restaurant:Object.assign({},Init_value),
           error:{}});
  
           e.preventDefault();
  }
  </code></pre>
  
  <p>App.js:</p>
  
  <pre><code>class App extends React.Component {
      constructor(props){
        super(props);
       this.handlerestaurantclick=this.handlerestaurantclick.bind(this);
       this.saveRestaurant=this.saveRestaurant.bind(this);
       this.state={restaurants:Restaurantlist,showcomponent:false,
                   restaurantClicked:-1,newrestaurant:{}}
       }
  
      saveRestaurant(restaurant){
            if(!restaurant.key){
            restaurant.key= Object.keys(this.state.restaurants).length;}
            this.setState((prevState)=&gt;
               {
                 let restaurants=prevState.restaurants;
                 restaurants[restaurant.key]=restaurant;
                 return{restaurants};
                });
  
         }
  </code></pre>
  
  <p>RestaurantList.jsx:</p>
  
  <pre><code> let list=[];
   restaurantArray.forEach((item,index)=&gt;{
                 list.push(&lt;Restaurant key={index} name= 
                 {item.restaurantName} 
                  adress={item.address} ratings={item.ratings} onClick= 
                 {()=&gt;this.handleclick(index)}&gt; &lt;/Restaurant&gt;)})
               return(&lt;div className="restaurant-list"&gt;
               &lt;Filter getmin_filter={this.state.handle_min} get_max= 
               {this.state.handle_max}/&gt;
               {list}
             &lt;/div&gt;);
  }
  </code></pre>