CODEWITHSUNDEEP
javascriptreactjscheckbox
iMMuNiTy
iMMuNiTy

Reputation: 476

How to reference currect element inside its defaultChecked - React

I have a dynamic array a[1,3] I have 3 checkboxes which have name and value and I want to default check them based on the dynamic array a. I want to pass inside defaultCheck each current child's value (by reference and not manually by the actual number(1,2,3)).Is that possible?

Something like defaultChecked={giveCheck(self.value} and be executed in the beginning so the checkboxes get their default check status

<input type="checkbox" name="a" value="1" defaultChecked={giveCheck(self.value}/>
<input type="checkbox" name="a" value="2" defaultChecked={giveCheck(self.value}/>
<input type="checkbox" name="a" value="3" defaultChecked={giveCheck(self.value}/>


giveCheck(value) {
if(a.indexOf(value)>=0){
return true;
}
return false;
}

Upvotes: 1

Views: 101

Answers (1)

Chris
Chris

Reputation: 59511

Old answer

Yes, that's definitely possible. In my example below I store the array in the state and for each of your inputs you check in that value exists in the array. You can use indexOf() if you want, but I prefer includes() as it is supported on all major browsers.

Also, you might want to change your name attributes to be unique.

class MyApp extends React.Component {
  constructor() {
    super();
    this.state = {
      a: [1,3]
    };
  }
 
  render() {
    return(
      <div>
        <input type="checkbox" name="a" value="1" defaultChecked={this.state.a.includes(1)} />
        <input type="checkbox" name="b" value="2" defaultChecked={this.state.a.includes(2)} />
        <input type="checkbox" name="c" value="3" defaultChecked={this.state.a.includes(3)} />
      </div>
    );
  }
}
 
ReactDOM.render(<MyApp />, document.getElementById("app"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

If you have more than 3 elements (say 50) and code readability is a concern, you can generate the inputs in a loop:

class MyApp extends React.Component {
  constructor() {
    super();
    this.state = {
      a: [1,3]
    };
  }
 
  render() {
    return(
      <div>
        {[...Array(50)].map(
          (v, i) => {
            return <input type="checkbox" name={"a"+i} value={i+1} defaultChecked={this.state.a.includes(i+1)} />
          })
        }
      </div>
    );
  }
}
 
ReactDOM.render(<MyApp />, document.getElementById("app"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

New answer

The short answer is: no, you cannot read the property of value before the component has been rendered. Basically what you are asking is for the code to read what you wrote earlier in the code. Unlike an event that triggers at runtime, this would have to happen on execution.

You could obviously just write the number twice:

<input type="checkbox" name="a" value="3" defaultChecked={giveCheck(3)}/>

but if you don't want this, create a function that returns an input element. This also eliminates the need for a "checker" function - just do it all in one function. This way, you input the value once, but can return code that uses that parameter in both places:

class MyApp extends React.Component {
  
  constructor() {
    super();
    this.state = {
      a: [1,3]
    };
  }
  
  renderInput(value) {
    return <input type="checkbox" name="a" value={value} defaultChecked={this.state.a.includes(value)} /> 
  }
 
  render() {
    return(
      <div>
        {this.renderInput(1)}
        {this.renderInput(2)}
        {this.renderInput(3)}
      </div>
    );
  }
}
 
ReactDOM.render(<MyApp />, document.getElementById("app"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

Upvotes: 1

Related Questions