title: how do i pass values dynamically in react to form
body: <p>I am learning react by myself, and I am having a hard time doing something thought it would be simple.</p>
  
  <p>In summary, I have a menu with a few items. </p>
  
  <ol>
  <li><p>I want to be able to select that menu item and when that happens, open a form next to it, the form has inputs, and those input will be prefilled in case there's a saved value for it.</p></li>
  <li><p>I want, if possible, to hide the editable form in case I click away from the form.</p></li>
  </ol>
  
  <p>I am not sure how to do that. I have been playing with the props, and react is complaining about uncontrollable and controllable components. I read about it and I get and. Now I am not sure what is the best way to do this. I don't need a "hack" in case my solution is not the right way to do it. I am really looking for how people would handle similar problem in an elegant way in React.</p>
  
  <p>Here's parts of the code I was writing, using material-ui-next</p>
  
  <pre><code>class EditMenu extends React.Component {
    constructor(props) {
      super(props);
      console.log(props);
  
      const itemsInfo = [
        {id: 11 , 
         title: 'title 1',
         description: 'desc 1'
        },
        {id: 22 , 
          title: 'title 2',
          description: 'desc 2'
         },
         {id: 33 , 
          title: 'title 3',
          description: 'desc 3'
         },
      ];
  
      let itemId = this.props.selectedItem;
      let item = _.find(itemsInfo, {id:itemId});
  
      this.state = {
        value: '',
        item: item,
        itemName: '',
        itemDescription: ''
      };
    }
  
    handleitemNameSetting = (event) =&gt; {
      event.preventDefault();
      debugger;
      this.setState({
          itemName: event.target.value
      });
    }
  
    render() {
  
      return (
  
        &lt;div className="form-container"&gt;
          &lt;form  &gt;
  
            &lt;TextField
              id="item-name"
              label="item Name"
              margin="normal"
              onChange={this.handleItemNameSetting}
              value={this.state.item.title}
            /&gt;
            &lt;br /&gt;
            &lt;TextField
              id="dish-desc"
              label="item Description"
              margin="normal"
              value={this.state.item.description}
            /&gt;
            &lt;br /&gt;
            &lt;TextField
              className="value-field-container"
              label="value"
              type="number"
              hinttext="item value" /&gt;
  
        &lt;/form&gt;
          &lt;/div&gt;
      );
    }
  }
  
  
  class MenuList extends React.Component {
      state = { editMenuOpen: false };
  
      handleClick = (id,event, item, ind) =&gt; {
        this.setState({editMenuOpen: true, selectedItem: id});
      };
  
      render() {
        const { classes } = this.props;
        const menuItems =  [
              {id: 11 , 
                  title: 'title 1'
              },
              {id: 22 , 
                  title: 'title 2'
              },
              {id: 33 , 
                  title: 'title 3'
              },
           ];
  
        return (
            &lt;div className={classes.root}&gt;
                &lt;Grid container spacing={24}&gt;
                    &lt;Grid item xs={2}&gt;
                        &lt;div&gt;
                            &lt;List
                                component="nav"
                                subheader={&lt;ListSubheader component="div"&gt;Lunch Menu&lt;/ListSubheader&gt;}
                                &gt;
  
                                {menuItems.map(item =&gt; (
                                &lt;ListItem button key={`${item.id}`} onClick= { () =&gt; this.handleClick(item.id)}&gt;
                                    &lt;ListItemText primary={`${item.title}`} /&gt;
                                &lt;/ListItem&gt;
                                ))} 
  
                            &lt;/List&gt;
                        &lt;/div&gt;
                    &lt;/Grid&gt;
                    &lt;Grid item xs&gt;
                        &lt;div&gt;
                           { this.state.editMenuOpen ? &lt;EditMenu selectedItem={this.state.selectedItem}&gt;&lt;/EditMenu&gt; : null }
                        &lt;/div&gt;
                    &lt;/Grid&gt;
                &lt;/Grid&gt;
  
            &lt;/div&gt;
        );
      }
    }
  </code></pre>