Блог

В принципе, теперь я печатаю новый массив в консоли каждый раз, когда флажок проверяется с новыми значениями, например: Результаты [истина, ложь, ложь]; = если установлен только первый флажок.

Теперь я хочу показать в компоненте SimpleCard react соответствующий текст, но каждый раз он должен меняться в соответствии с новым массивом, создаваемым каждый раз, когда я устанавливаю или снимаю один из флажков. Как, например : Первый проверен, Второй не проверен, Третий не проверен и так далее…

Надеюсь, я смог вам это объяснить.

 
    constructor(props) {
        super(props);

        this.onChange = this.onChange.bind(this);
        //this.showlive = this.showlive.bind(this)

        const checkboxList = [
            {
                id: "blu",
                name: "blu",
                value: "blu",
                dimension: "sm",
                label: "blu",
                inputClass: [],
                labelClass: [],
                event: { onChange: this.onChange },
                extraProps: { visible: true, checked: false }
            },
            {
                id: "red",
                name: "red",
                value: "red",
                dimension: "sm",
                label: "red",
                inputClass: [],
                labelClass: [],
                event: { onChange: this.onChange },
                extraProps: { visible: true, checked: true }
            },
            {
                id: "yellow",
                name: "yellow",
                value: "yellow",
                dimension: "sm",
                label: "yellow",
                inputClass: [],
                labelClass: [],
                event: { onChange: this.onChange },
                extraProps: { visible: true, checked: false }
            }
        ]

        this.state = {
            error: null,
            checkboxList: checkboxList

        }
    };

    componentDidMount() {
  
    }

    onChange(event) {
        const checkboxList = this.state.checkboxList.map((elem) => {
            if (elem.name === event.target.name)
                elem.extraProps.checked = event.target.checked
            return elem
            
            
        })

        this.setState({ 
            checkboxList: checkboxList,
            SimpleCard: Body })
    }

    render(){

        let i;
        let Risultati = [];

        for(i=0; i<3; i  ){
            let v = this.state.checkboxList[i].extraProps.checked;
            Risultati.push(v)
            return Risultati; 
        }
        
        console.log(Risultati);

        const legend = "Checkbox"

        return (
            <div>
                <Checkbox
                    checkboxList={this.state.checkboxList}
                    legend={legend}
                ></Checkbox>

                <SimpleCard
                    title="Colors selected"
                    titleHeading="h2"
                    data={<p> Data</p>}
                    body={ <p> Here I want the text to be displayed </p>}
                >
                    {" "}
                </SimpleCard>
            </div>
        );
    };
};

 

Я думаю, что ваша переменная «CheckBoxList» в состоянии, react не может обнаружить изменения.

Как насчет такого.

     this.setState({ 
          checkboxList: [...checkboxList],
          SimpleCard: Body 
    })