React Forms data is present in two components

Question

I have two Components App,Entry2. In App I am calling Entry2 which is basically a form.Now i wanted to get the selected option back to App.How do I do that? App.jsx

<Entry2 
      question="What is the color of apple?"
      op1="red"
      op2="green"
      op3="blue"
      op4="yellow"
/>

Entry2.jsx

function Entry2(props) {
  return (
    <div className="term">
      <div>
        <p>{props.question}</p>
            <div>
            <input type="checkbox" id="op1" name="ans" value="{props.op1}" />
            <label>{props.op1}</label>
            <input type="checkbox" id="op2" name="ans" value="{props.op2}" />
            <label>{props.op2}</label>
            <input type="checkbox" id="op3" name="ans" value="{props.op3}" />
            <label>{props.op3}</label>
            <input type="checkbox" id="op4" name="ans" value="{props.op4}" />
            <label>{props.op4}</label>
            <input type="submit"/>
          </div>
      </div>
    </div>
  );
}

Answer 1

There a few ways to get data back to the parent component.

The first method is to let the parent component to manage the form state and listen for change events so that the state can be updated.

In the second method, you keep the state inside the Entry2 component itself and only "notify" the parent component on submit. This is useful if the component is the full form for example.

I also suggest that you make the options more dynamic. I'm also guessing that there should only be 1 option selected so you probably would want to use a select input.

Instead of the op1..op4 props, change it to a single options prop like so:

<Entry2 
  question="What is the color of apple?"
  options={['red', 'green', 'blue', 'yellow']}
/>

If more colours need to be added, you can simply add one to the options Array.

When you choose the second method, you will have to make the following changes:

const {useState} = React;

function Entry2(props) {
  // use an empty string or the default selected option `props.options[0]`
  const [value, setValue] = useState(''); 

  return (
    <div className="term">
      <div>
        <p>{props.question}</p>
        <form onSubmit={event => props.onSubmit(event, value)}>
          <select onChange={event => setValue(event.target.value)}>
            {props.options.map(option => <option key={option} value={option}>{option}</option>)}
          </select>
          <input type="submit" />
        </form>
      </div>
    </div>
  );
}

function App() {
  const [submittedValue, setSubmittedValue] = useState();
  
  return (
    <div>
      <Entry2
        question="What is the color of the apple?"
        options={['red', 'green', 'blue', 'yellow']}
        onSubmit={(event, value) => {
          event.preventDefault();
          setSubmittedValue(value);
        }}
      />
      <p>Submitted: {submittedValue}</p>
    </div>
  );
}

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>

<div id="root"></div>