How to get only one value in a variable of parent component, by selecting and switching to any of the option in reactjs?

user_12847145 0
Viewed 145

i'm new to React and made a small gaming component which have indoor and outdoor options. In outdoor Item, we have 2 radio buttons and in indoor Item, we have multiple check boxes. My object is we have to get only one value either for outdoor or indoor games fields (indoor games may have multiple values). But not getting any idea how to get the value from these fields.

for Indoor and Outdoor: 

   <Form>
            <Form.Field
              as="h4"
              control={Radio}
              label="Foot-Ball"
              key="Foot-Ball"
              value="Foot-Ball"
              checked={this.props.game === "Foot-Ball"}
              onChange={this.props.onChange}
            />
            <Form.Field
              as="h4"
              control={Radio}
              label="Cricket"
              key="Cricket"
              value="Cricket"
              checked={this.props.game === "Cricket"}
              onChange={this.props.onChange}
            />{" "}
          </Form>

I'm getting output in this way snippet

My objective is for the variable game, either i should get radio button value or i have to get indoor game values but not both in game variable.

Can anyone help me in this?

Here is the working one: "https://codesandbox.io/s/tender-moon-frub1?"

reactjs
2 Answers

Issue: The game state gets state from both the indoor and outdoor inputs mixed up, and when you try spreading in the previous state's outdoor game game strings, they are interpreted as character arrays since they are iterable. They get spread in a character-at-a-time.

Expected: One of the Outdoor Games radio button result value strings OR an array of Indoor Games checked value id strings.

Solution: Add a second piece of state to track which "tab" you are interacting with, i.e. indoor/outdoor. (I.E. use the fact the event handler was invoked)

this.state = {
  indoor: null,
  game: ""
};

Add toggling indoor false upon interaction with the "outdoor" radio buttons.

handleRadioSelect = (e, { value }) => {
  this.setState({ indoor: false, game: value });
};

Then use a check in the "indoor" checkbox handler to see if already interacting with the indoor options or if the UI just switched from the outdoor side.

handleCheck = id => {
  const { game, indoor } = this.state;

  if (!indoor) {
    // switching from outdoor games
    // set indoor and initialize array
    this.setState({ indoor: true, game: [id] });
  } else {
    // filter array as per usual
    const result = game.includes(id)
      ? game.filter(x => x !== id)
      : [...game, id];

    this.setState({ game: result });
  }
};

Edit sharp-davinci-qmsbp

user_86908570

In handleCheck, your first parameter won't contain information which you are looking for, they will be present in second parameter of callback function. So, you need to use second parameter. Also, you were destructuring value from state instead of this.props.

Updated sandbox with working solution: https://codesandbox.io/s/keen-gates-b4jsn

user_68638650
Related