Adding the attribute 'selected' to Checkbox in ReactJs

Question

I am using <Checkbox> component in my react project. The code is

App.jsx

import React, { Component } from 'react'
import { connect } from 'react-redux';
import Checkbox from '../../../components/Checkbox/Checkbox.jsx';

class App extends Component {
  render() {
    return (
      <div className="App">
        <div style={{ 'float': 'left', 'background': 'white' }}><Checkbox
             input={{
             name: 'sampleName',
             onChange: (e) => this.onSelect(e.target.checked),
             value: allSelected
             }}
          /></div>
      </div>
    )
  }
}



export default connect(

)(App); 

Checkbox.jsx

import React from 'react';

import './Checkbox.scss';

class Checkbox extends React.Component {
    render() {
        const { input: {name, size, value, onChange}, disabled } = this.props;

        return (
            <div className="checkbox">
                <input disabled={disabled} id={name} type="checkbox" value={value} onChange={onChange} />
                <label htmlFor={name} className={size}/>
            </div>
        );
    }
}

export default Checkbox;

I want to include one more attribute checked: {Item.Selected} to the <Checkbox> tag , for that what changes I needed to make in the Checkbox.jsx page to accepet the value of the attribute selected?

Answer 1

Not sure if understanding this correctly, but if I do. App.jsx

class App extends Component {
  render() {
    return (
      <div className="App">
        <Checkbox
             input={{
             name: 'sampleName',
             onChange: (e) => this.onSelect(e.target.checked),
             value: allSelected
             }}
             checked={(your condition, evaluating to true/false)}
             disabled={whatever}                                
          />
      </div>
    )
  }
}

And then Checkbox.jsx

class Checkbox extends React.Component {
    render() {
        const { input: {name, size, value, onChange}, disabled, checked } = this.props;
    return (
        <div className="checkbox">
            <input disabled={disabled} checked={checked} id={name} type="checkbox" value={value} onChange={onChange} />
            <label htmlFor={name} className={size}/>
        </div>
    );
}

Hope this helps!

Answer 2

The thing you are calling attribute, is called prop in react. When you pass a prop to a component, you can get it with this.props in that component. So, your files should be like these:

App.jsx:

import React, { Component } from 'react'
import { connect } from 'react-redux';
import Checkbox from '../../../components/Checkbox/Checkbox.jsx';

class App extends Component {
  render() {
    return (
      <div className="App">
        <div style={{ 'float': 'left', 'background': 'white' }}><Checkbox
             checked={Item.Selected}
             input={{
             name: 'sampleName',
             onChange: (e) => this.onSelect(e.target.checked),
             value: allSelected
             }}
          /></div>
      </div>
    )
  }
}



export default connect(

)(App); 

Checkbox.jsx:

import React from 'react';

import './Checkbox.scss';

class Checkbox extends React.Component {
    render() {
        //the checked variable added below:
        const { input: {name, size, value, onChange}, disabled, checked } = this.props;

        return (
            <div className="checkbox">
                <input disabled={disabled} id={name} type="checkbox" value={value} onChange={onChange} />
                <label htmlFor={name} className={size}/>
            </div>
        );
    }
}

export default Checkbox;