Topic: checked not working. doesnt change state.

Ali Naiemabadi free asked 3 years ago


Expected behavior not working :

checked={proditem.deliveryTimeId===this.state.deliverTime ? true : false}

Actual behavior

Source

let deliveryTimeTable = [];

            response.data.deliveryTimes.map((prod, index) => {

                return deliveryTimeTable.push(
                    <Fragment key={index}>

                        <span className={classes.subtitles}>{prod.deliveryTitle}</span>

                        <MDBFormInline key={"frm." + index}>

                            {prod.deliveryTimeList.map(proditem => {
                                return <MDBInput
                                   onClick={() => this.deliveryHandler(proditem.deliveryTimeId)}
                                    checked={proditem.deliveryTimeId===this.state.deliverTime   ? true : false}
                                    label={proditem.deliveryTitle}
                                    labelClass='mr-5'
                                    type='radio'
                                    id={"delivery." + proditem.deliveryTimeId}
                                    key={"deliveryk." + proditem.deliveryTimeId}

                                />
                            })}
                        </MDBFormInline>
                    </Fragment>
                );
            });

Piotr Glejzer staff answered 3 years ago


try this

import React, { Component } from 'react';
import { MDBContainer, MDBInput } from 'mdbreact';

class InputPage extends Component {
  state = {
    checkbox: true,
    id: 1
  };

  handleCheckboxChange = (e, i) => {
    const { checkbox } = this.state;
    const { checked, value, id } = e.target;

    if (Number(id) === i) {
      this.setState({ checkbox: !checkbox, id: i });
    }

    console.log(`${value} checked? ${checked}`);
  };

  render() {
    const testArray = [
      { id: 0, label: 'test1' },
      { id: 1, label: 'test2' },
      { id: 2, label: 'test3' },
      { id: 3, label: 'test4' }
    ];

    const { checkbox, id } = this.state;
    return testArray.map((e, i) => {
      return (
        <MDBContainer key={e + i} className='border p-3'>
          <MDBInput
            id={i}
            value='Classic checkbox'
            label={e.label}
            checked={id === i ? checkbox : false}
            onChange={el => this.handleCheckboxChange(el, i)}
            type='checkbox'
            containerClass='my-3'
          />
        </MDBContainer>
      );
    });
  }
}

export default InputPage;

Piotr Glejzer staff answered 3 years ago


Try something like that:

import React, { Component } from 'react';
import { MDBContainer, MDBInput } from 'mdbreact';

class InputPage extends Component {
  state = {
    checkbox: true
  };

  handleCheckboxChange = e => {
    const { checkbox } = this.state;
    const { checked, value } = e.target;
    this.setState({ checkbox: !checkbox });
    console.log(`${value} checked? ${checked}`);
  };

  render() {
    const { checkbox } = this.state;
    return (
      <MDBContainer className='border p-3'>
        <MDBInput
          value='Classic checkbox'
          label='Classic checkbox'
          checked={checkbox}
          onChange={this.handleCheckboxChange}
          type='checkbox'
          id='checkbox'
          containerClass='my-3'
        />
      </MDBContainer>
    );
  }
}

export default InputPage;
enter code here

Ali Naiemabadi free commented 3 years ago

its group radio buttons. so this solution isnt possible.


Piotr Glejzer staff commented 3 years ago

you can change the function to check checkboxes in depending what index is.


Ali Naiemabadi free commented 3 years ago

please give sample code. thanks in advanced.


Ali Naiemabadi free commented 3 years ago

I am using this function but its not working.

deliveryHandler = (value) => { this.setState({ deliverTime: value }); }



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 4.26.1
  • Device: Asus
  • Browser: chrome
  • OS: window 10
  • Provided sample code: No
  • Provided link: No