mercredi 2 août 2017

REACT JavaScript how to use a custom Class Name?

I am trying to create a custom Class Name for use in a REACT Component. I am using the map function to create multiple control elements. I want to be able to specify which UnitSelector this is so my error validation will highlight the correct control.

Here is the render code:

    units ?
    units.map((unit, index) => {

        return (
            <div> 
                <UnitSelector className={ this.state.errors.unit + index } 

Here is the validation code:

    let errors = {};
    let errorFound = false;
    let tempUnits = this.state.units;

    //Can only add a new unit, if every Unit Selector has selected a unit.
    for( let i = 0; i < tempUnits.length; i++ ) {
        if( !tempUnits[i] || !tempUnits[i].number ) {
            errorFound = true;
            let fieldName = "unit" + i;
            errors[fieldName] = 'custom-error';
        }
    }

    if( !errorFound ) tempUnits.push();

    this.setState({ units: tempUnits, errors: errors });

I believe everything is working correctly except for this part.

            <UnitSelector className={ this.state.errors.unit + index } 

Aucun commentaire:

Enregistrer un commentaire