OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Getting checkbox state in React JS

  • Thread starter Thread starter Boky
  • Start date Start date
B

Boky

Guest
My code is as follows :

Code:
 import React from 'react';
import FontAwesome from 'react-fontawesome';
import {Link} from 'react-router';
import { filter_names } from './filterActions';
import _ from 'lodash';

export default class fuel extends React.Component {
    constructor(props){
        super(props);

        this.state = {
            values: {}
        }
    }


    handleFuel(name, event){
        let checkbox = event.target.checked;
        let nValues = _.clone(this.state.values);
        nValues.type = name;
        nValues.active = checkbox;
        this.setState({values: nValues});
    }



    render() {
        const language = this.props.language;

        return (
            <div>
                <div className="priceTitle" style={{padding: '5px 0'}}>{language.fuel}</div>
                <div className="transmissionValues">
                    {_.uniq(this.props.allCarsInTheList.map(i => i.fuel)).map((v, i) => {
                        return (<div key={i}><input type="checkbox" onChange={this.handleFuel.bind(this, v)} checked={true}/> <span>{v}</span></div>);
                    })}
                </div>
                {/*<div className="transmissionValues">
                    <input type="checkbox" onChange={this.handleBenzine.bind(this)} checked={this.getFilterValues().checkboxBenzine}/> <span>Benzine</span>
                </div>*/}
            </div>
        );
    }
}

I'm mapping through my data and depending on fuel field I'm rendering checkboxes. Thus, I do not want to change the code if my data is changed. But now I have problem to get check if the checkbox is checked or not.

In handleFuel function I'm adding data to the state, and if checkbox is changed the state (this.state.values) should be something like {type: "Diesel", active: "True"}.

And then in the render I need somehow to get the state active. I tried with something like let checkboxState = Object.keys(this.state.values).length > 0 ? this.state.values.filter(i => i.type === v).active : false; , but it didn't worked.

Any advice?

UPDATE

Code:
let allCarsInTheList = [
    {
        id: 1,
        listID: 3,
        make: "Audi",
        model: "Q5",
        desc: "2.0 CR TDi Comfortline BMT",
        price: 12484,
        mileage: 120021,
        fuel: "Diesel",
        engine: '105/77',
        chassis: "WAUZZZ4G4FN026103"
    }, {
        id: 2,
        listID: 3,
        make: "Audi",
        model: "Q5",
        desc: "2.0 CR TDi Comfortline BMT",
        price: 12484,
        mileage: 120021,
        fuel: "Benzine",
        engine: '105/77',
        chassis: "WAUZZZ4G4FN026103"
    }, {
        id: 3,
        listID: 3,
        make: "Audi",
        model: "Q5",
        desc: "2.0 CR TDi Comfortline BMT",
        price: 12484,
        mileage: 120021,
        fuel: "Diesel",
        engine: '105/77',
        chassis: "WAUZZZ4G4FN026103"
    }, {
        id: 4,
        listID: 3,
        make: "Audi",
        model: "Q5",
        desc: "2.0 CR TDi Comfortline BMT",
        price: 12484,
        mileage: 120021,
        fuel: "Diesel",
        engine: '105/77',
        chassis: "WAUZZZ4G4FN026103"
    }
]

<p>My code is as follows :</p>

<pre><code> import React from 'react';
import FontAwesome from 'react-fontawesome';
import {Link} from 'react-router';
import { filter_names } from './filterActions';
import _ from 'lodash';

export default class fuel extends React.Component {
constructor(props){
super(props);

this.state = {
values: {}
}
}


handleFuel(name, event){
let checkbox = event.target.checked;
let nValues = _.clone(this.state.values);
nValues.type = name;
nValues.active = checkbox;
this.setState({values: nValues});
}



render() {
const language = this.props.language;

return (
<div>
<div className="priceTitle" style={{padding: '5px 0'}}>{language.fuel}</div>
<div className="transmissionValues">
{_.uniq(this.props.allCarsInTheList.map(i => i.fuel)).map((v, i) => {
return (<div key={i}><input type="checkbox" onChange={this.handleFuel.bind(this, v)} checked={true}/> <span>{v}</span></div>);
})}
</div>
{/*<div className="transmissionValues">
<input type="checkbox" onChange={this.handleBenzine.bind(this)} checked={this.getFilterValues().checkboxBenzine}/> <span>Benzine</span>
</div>*/}
</div>
);
}
}
</code></pre>

<p>I'm mapping through my data and depending on fuel field I'm rendering checkboxes. Thus, I do not want to change the code if my data is changed. But now I have problem to get check if the checkbox is checked or not. </p>

<p>In handleFuel function I'm adding data to the state, and if checkbox is changed the state (<code>this.state.values</code>) should be something like <code>{type: "Diesel", active: "True"}</code>. </p>

<p>And then in the render I need somehow to get the state active. I tried with something like <code>let checkboxState = Object.keys(this.state.values).length > 0 ? this.state.values.filter(i => i.type === v).active : false;</code> , but it didn't worked.</p>

<p>Any advice? </p>

<p><strong>UPDATE</strong></p>

<pre><code>let allCarsInTheList = [
{
id: 1,
listID: 3,
make: "Audi",
model: "Q5",
desc: "2.0 CR TDi Comfortline BMT",
price: 12484,
mileage: 120021,
fuel: "Diesel",
engine: '105/77',
chassis: "WAUZZZ4G4FN026103"
}, {
id: 2,
listID: 3,
make: "Audi",
model: "Q5",
desc: "2.0 CR TDi Comfortline BMT",
price: 12484,
mileage: 120021,
fuel: "Benzine",
engine: '105/77',
chassis: "WAUZZZ4G4FN026103"
}, {
id: 3,
listID: 3,
make: "Audi",
model: "Q5",
desc: "2.0 CR TDi Comfortline BMT",
price: 12484,
mileage: 120021,
fuel: "Diesel",
engine: '105/77',
chassis: "WAUZZZ4G4FN026103"
}, {
id: 4,
listID: 3,
make: "Audi",
model: "Q5",
desc: "2.0 CR TDi Comfortline BMT",
price: 12484,
mileage: 120021,
fuel: "Diesel",
engine: '105/77',
chassis: "WAUZZZ4G4FN026103"
}
]
</code></pre>
 

Latest posts

Top