Conditionally set checkbox state based on variable in ReactJS

Question

class Example extends React.Component {
  constructor() {
    super();
    this.isChecked = this.isChecked.bind(this);
  }

  isChecked(ex){
    return this.props.defaults && $.inArray(ex, this.props.defaults);
  }

  render() {
    return (
      <div className="example">
        {this.props.items.map(item => (
          var checked = this.isChecked({item.type});

          <span key={item.type}>
            <input type="checkbox" {checked ? 'checked' : ''} name="example" value={item.type} id={item.type} />
            <label htmlFor={item.type}>{item.display}</label>
          </span>
        ))}
      </div>
    );
  }
}

In the above example, I have passed a list of items to the component this.props.items and a list of defaults this.props.defaults. For each item, if the item is in the list of defaults, I would like its state to be checked. Leaving the overall design the same, how can I do that? (Note: I realize I can redesign the application to avoid the issue of declaring the variable inside the map. That is not the question).

The above code doesn't work (obviously), I am just trying to give everyone an idea of what I'm attempting here. The error given if you run this is something like "unexpected token" at the spot where "var" is declared.

JGallardo · Accepted Answer · 2019-02-28 19:37:24Z

11

the render method had some syntax errors, this should work:

render() {

  return (
    <div className="example">
      {this.props.items.map((item) => {
        var checked = this.isChecked(item.type);

        return (
          <span key={item.type}>
            <input type="checkbox" checked={checked ? 'checked' : ''} name="example" value={item.type} id={item.type} />
            <label htmlFor={item.type}>{item.display}</label>
          </span>
        )
      })}
    </div>
  );
}

That main mistakes were declaring the function in map, you have to wrap item in parens and surround the function with brackets instead of parens. If a fat arrow function has only one statement, you don't need to specify return. But in this case you added the var checked line, so you now have to explicitly make the other line a return statement. There was also an issue with how you set checked in the input. Hope that helps!

edited Feb 28, 2019 at 19:37

JGallardo

11.5k12 gold badges87 silver badges100 bronze badges

answered Dec 30, 2016 at 22:18

Drew Schuster

2,69115 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Kyle Over a year ago

Thanks for the advice. The reason I set checked the way I did was because in HTML the mere presence of the word 'checked' indicates the box should be checked; the value does not matter. Is that incorrect? But I do think I'd have to use the dangerouslySetInnerHtml method to do things the way I was attempting. By the way, the advice is much appreciated.

Drew Schuster Over a year ago

Oh I see why you were trying to just spit out checked, but yeah in this case that's not valid jsx syntax. React handles that optimization for you, you won't see "checked=true" in the DOM.

Kyle Over a year ago

Thank you, your solution worked. There were a couple other minor mistakes, for example, the key={item.type} should be key={item.type + checked} so that reactJS will re-render the list if the default checked items change. Obviously, you had no way of knowing that since it's specific to my implementation. Thanks so much for your help!

Collectives™ on Stack Overflow

Conditionally set checkbox state based on variable in ReactJS

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related