2

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?"

Sandhya
  • 401
  • 2
  • 10
  • 24

2 Answers2

2

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

Drew Reese
  • 165,259
  • 14
  • 153
  • 181
  • Can you please help me in new query ? "https://stackoverflow.com/questions/63833772/unable-to-validate-dropdown-once-we-click-on-the-submit-button-using-reactjs" – Sandhya Sep 11 '20 at 02:22
0

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

mukesh210
  • 2,792
  • 2
  • 19
  • 41
  • But i want the value of the `game` variable. For example if i choose `carrom` and `ludo` from the indoor games then the `game` variable should show `game: "carrom and ludo"`. if i choose outdoor game without choosing indoor game then the "game" variable should show `game: "cricket"` – Sandhya Mar 11 '20 at 12:52
  • I don't have access to my laptop till tomorrow morning... Will provide a solution for this one tomorrow morning – mukesh210 Mar 11 '20 at 13:48
  • Oh... No problem... I'll wait – Sandhya Mar 12 '20 at 05:05