How to get the value in string format using reactjs?

Question

I have created multiple checkboxes and the values of checkboxes are storing in a form of array but i dont want to store it in the form of array elements. i wanted to display in normal way without array.

Here is the code:

<Form>
  <Checkbox
    as="h4"
    label="Carrom"
    onChange={() => this.props.handleCheck("Carrom")}
    checked={this.props.game.includes("Carrom")}
  />

  <br />
  <Checkbox
    as="h4"
    label="Ludo"
    onChange={() => this.props.handleCheck("Ludo")}
    checked={this.props.game.includes("Ludo")}
  />
  <br />
  <Checkbox
    as="h4"
    label="Play-Station"
    onChange={() => this.props.handleCheck("Play-Station")}
    checked={this.props.game.includes("Play-Station")}
  />
</Form>;

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

Can anyone help me in this?

What do you mean by *normal* way? Since you have 3 `Checkbox` components, you will have to use an array to hold the state of each component. — MjZac, Apr 15 '20 at 06:20
@UtsavPatel - Hi, I want the checkbox values should be displayed in `"Carrom", "Ludo", "play-station"` (i mean i dont want sqyare brackets[]) — Sandhya, Apr 15 '20 at 06:23
@Sandhya I understand that you want to display your values in a particular way. But which data structure you intend to use to store them? You already said no to square brackets i.e array. — Utsav Patel, Apr 15 '20 at 06:26
@MjZac - Could you please preview the codesandbox, here not only i'm giving checkboxes but also i'm giving radio buttons, moreover i'm getting the value but when i'm getting the value of checkboxes it is appearing in array format. it must be fault of method where i'm giving [], but i couldn't able to display data without an array. now i have to remove the square braces. — Sandhya, Apr 15 '20 at 06:26
@UtsavPatel - The main problem is i'm getting both the values in array, i want only one value to store it in "game" variable. either i have to get the value from outdoor game or from indoor game but not both. Moreover when we click on one of the game in outdoor section, it is showing in a string way but simultaneously when i click on indoor, it is showing both radio button and checkbox value in array in a different format :( — Sandhya, Apr 15 '20 at 06:30
@Sandhya I didn't quite understand what you mean. When you say values should be displayed shouldn't have square brackets, you mean the `console.log("from checkbox",..` ? — MjZac, Apr 15 '20 at 06:31
@Sandhya In your `handleCheck` function, you are using `.filter`. It returns an array i.e square brackets. You are assigning it on line 21, `this.setState({ game: result }, `. That is the reason you are getting that value in brackets. — Utsav Patel, Apr 15 '20 at 06:36
You can solve this by manging two keys in state. Currenlty you are just using `game` in your state object. you can do game = { indoor: value, outdoor: value } And then only change `indoor` or ` outdoor` depending upon the case. — Utsav Patel, Apr 15 '20 at 06:40
@Sandhya, Whether this is what you want?? https://codesandbox.io/s/exciting-shannon-ozdkn Take a look at console.. — Maniraj Murugan, Apr 15 '20 at 06:41
@ManirajMurugan - Its working as i required but when i click on radio button that value also getting displayed — Sandhya, Apr 15 '20 at 06:45
@UtsavPatel - Can you help me in that? where to give game = { indoor: value, outdoor: value } — Sandhya, Apr 15 '20 at 06:46
@Sandhya in `this.state = { game :{ indoor:value, outdoor:value }}` — Utsav Patel, Apr 15 '20 at 06:48
@DrewReese - Can you help in getting only one section value in game. if i click on radio button it is showing the value and when i click on checkbox, then it is showing both indoor and outdoor values at a time. I couldn't able to get only one section value — Sandhya, Apr 15 '20 at 06:57
@DrewReese - If i click on radio button then game variable should have radio button value and if i click on checkbox values then game variable should have only checkbox values but not both. Could you please help me in getting this? — Sandhya, Apr 15 '20 at 07:03
@Sandhya Sure, I can try. Please open new question though. SO questions should be limited to one, singular, issue. — Drew Reese, Apr 15 '20 at 07:03
@DrewReese - I've already raised a query "https://stackoverflow.com/questions/60632723/how-to-get-only-one-value-in-a-variable-of-parent-component-by-selecting-and-sw" but didn't get appropriate answer. Seeking for help from long back but no one turned up. — Sandhya, Apr 15 '20 at 07:58

score 0 · Accepted Answer · answered Apr 15 '20 at 06:58

If you simply want to "pretty" print an array of strings and don't want the array toString, you can join the array into a single string.

console.log("from checkbox", this.state.game.join(", "));

data = ["carrots", "peas", "green beans"];

console.log("pretty array list:", data.join(", "));

score 0 · Answer 2 · answered Apr 15 '20 at 07:09

You have to check if the game is an array or not in the handleCheck method. Otherwise, since you are using same state to store values between indoor and outdoor games, the previous value of outdoor game will be included in the state. To reassign the game to empty array, it should be let instead of const.

 handleCheck = id => {
    let { game } = this.state;
    // Check if game is an array or not. 
    if(!Array.isArray ( game )) {
        game = []
    }

    const result = game.includes(id)
      ? game.filter(x => x !== id)
      : [...game, id];
    this.setState({ game: result }, () => {
      console.log("from checkbox", this.state.game.join(", "));
    });
  };

How to get the value in string format using reactjs?

2 Answers2