title: how to pass the data from child component to parent component
body: <p>now I am trying to send the data from child component to parent.</p>
  
  <p>I have researched lot i didnt get any good solution. if there is a solution can any explain me to solve this.</p>
  
  <p><strong>APP.js</strong></p>
  
  <pre><code> import React from 'react';
      import IntegrationDownshift from './members'
      class App extends React.Component {
           constructor(props) {
            super(props);
            this.state = {
               Name: "Name from state...",
               Description: "Description from state...",
              Data:[data]
            }
         }
        render() {  
           return (
              &lt;div&gt;
       &lt;IntegrationDownshift Members={this.state.Data}/&gt;
             &lt;/div&gt;
           );
        }
      }
  
  export default App;`
  </code></pre>
  
  <p><strong>members</strong></p>
  
  <pre><code>var suggestions = []
  var members=[];
  function renderInput(inputProps) {
    const { InputProps, classes, ref, ...other } = inputProps;
    return (
      &lt;TextField
        InputProps={{
          inputRef: ref,
          classes: {
            root: classes.inputRoot,
            input: classes.inputInput,
          },
          ...InputProps,
        }}
        {...other}
      /&gt;
    );
  }
  function renderSuggestion(suggestionProps) {
    const { suggestion, index, itemProps, highlightedIndex, selectedItem } = suggestionProps;
    const isHighlighted = highlightedIndex === index;
    const isSelected = (selectedItem || '').indexOf(suggestion.label) &gt; -1;
    return (
      &lt;MenuItem
        {...itemProps}
        key={suggestion.label}
        selected={isHighlighted}
        component="div"
        style={{
          fontWeight: isSelected ? 500 : 400,
        }}
      &gt;
        {suggestion.label}
      &lt;/MenuItem&gt;
    );
  }
  renderSuggestion.propTypes = {
    highlightedIndex: PropTypes.number,
    index: PropTypes.number,
    itemProps: PropTypes.object,
    selectedItem: PropTypes.string,
    suggestion: PropTypes.shape({ label: PropTypes.string }).isRequired,
  };
  function getSuggestions(value, { showEmpty = false } = {}) {
    const inputValue = deburr(value.trim()).toLowerCase();
    const inputLength = inputValue.length;
    let count = 0;
    return inputLength === 0 &amp;&amp; !showEmpty
      ? []
      : suggestions.filter(suggestion =&gt; {
          const keep =
            count &lt; 5 &amp;&amp; suggestion.label.slice(0, inputLength).toLowerCase() === inputValue;
          if (keep) {
            count += 1;
          }
          return keep;
        });
  }
  function DownshiftMultiple(props) {
      suggestions=props.Members;
    const { classes } = props;
    const [inputValue, setInputValue] = React.useState('');
    const [selectedItem, setSelectedItem] = React.useState([]);
    function handleKeyDown(event) {
      if (selectedItem.length &amp;&amp; !inputValue.length &amp;&amp; event.key === 'Backspace') {
        setSelectedItem(selectedItem.slice(0, selectedItem.length - 1));
      }
    }
    function handleInputChange(event) {
      setInputValue(event.target.value);
    }
    function handleChange(item) {
      let newSelectedItem = [...selectedItem];
      if (newSelectedItem.indexOf(item) === -1) {
        newSelectedItem = [...newSelectedItem, item];
        members=newSelectedItem;   // **want to send this**
         props.onDataChanged(members)// **here i'm trying to send the value**
      }
      setInputValue('');
      setSelectedItem(newSelectedItem);
    }    
    const handleDelete = item =&gt; () =&gt; {
      const newSelectedItem = [...selectedItem];
      newSelectedItem.splice(newSelectedItem.indexOf(item), 1);
      setSelectedItem(newSelectedItem);
    };    
    return (
      &lt;Downshift
        id="downshift-multiple"
        inputValue={inputValue}
        onChange={handleChange}
        selectedItem={selectedItem}
      &gt;
        {({
          getInputProps,
          getItemProps,
          getLabelProps,
          isOpen,
          inputValue: inputValue2,
          selectedItem: selectedItem2,
          highlightedIndex,
        }) =&gt; {
          const { onBlur, onChange, onFocus, ...inputProps } = getInputProps({
            onKeyDown: handleKeyDown,
            placeholder: 'Select multiple Members',
          });
  
          return (
            &lt;div className={classes.container}&gt;
              {renderInput({
                fullWidth: true,
                classes,
                InputLabelProps: getLabelProps(),
                InputProps: {
                  startAdornment: selectedItem.map(item =&gt; (
                    &lt;Chip
                      key={item}
                      tabIndex={-1}
                      label={item}
                      className={classes.chip}
                      onDelete={handleDelete(item)}
                    /&gt;
                  )),
                  onBlur,
                  onChange: event =&gt; {
                    handleInputChange(event);
                    onChange(event);
                  },
                  onFocus,
                },
                inputProps,
              })}
  
              {isOpen ? (
                &lt;Paper className={classes.paper} square&gt;
                  {getSuggestions(inputValue2).map((suggestion, index) =&gt;
                    renderSuggestion({
                      suggestion,
                      index,
                      itemProps: getItemProps({ item: suggestion.label }),
                      highlightedIndex,
                      selectedItem: selectedItem2,
                    }),
                  )}
                &lt;/Paper&gt;
              ) : null}
            &lt;/div&gt;
          );
        }}
      &lt;/Downshift&gt;
    );
  }
  
  DownshiftMultiple.propTypes = {
    classes: PropTypes.object.isRequired,
  };
  
  const useStyles = makeStyles(theme =&gt; ({
    root: {
      flexGrow: 1,
      height: 250,
    },
    container: {
      flexGrow: 1,
      position: 'relative',
    },
    paper: {
      position: 'absolute',
      zIndex: 1,
      marginTop: theme.spacing(1),
      left: 0,
      right: 0,
    },
    chip: {
      margin: theme.spacing(0.5, 0.25),
    },
    inputRoot: {
      flexWrap: 'wrap',
    },
    inputInput: {
      width: 'auto',
      flexGrow: 1,
    },
    divider: {
      height: theme.spacing(2),
    },
  }));
  
  let popperNode;
  
  export default function IntegrationDownshift(props) {
      debugger
    const classes = useStyles();
    const Members=props.Members;
     props.onDataChanged("test")
  
    return (
      &lt;div className={classes.root}&gt;
  
        &lt;DownshiftMultiple classes={classes} Members={Members}  /&gt;
  
      &lt;/div&gt;
    );
  }
  </code></pre>
  
  <p>I'm trying to implement this <a href="https://codesandbox.io/s/runh6" rel="nofollow noreferrer">https://codesandbox.io/s/runh6</a> functionality which is material UI. I'm able to send the value from parent to child. but its not coming back to parent.</p>
  
  <p>Now I want to read the <strong>members</strong> value in app.js. Is there a way to read the data in app.js</p>