Changing custom control style dynamically - reactjs

Question

Changing custom control style dynamically
I am trying to use react to put red border around each custom field that is empty. array this.state.Fields contains all the controls to be checked.
I want to check every required control and if its value not set, change its style property. Since properties cannot be changed, I tried to use state but the problem is I'd need to have a separate vriable for each control:
<Control ref="controlLabel" name="controlLabel" type="1" onComponentMounted={this.register} label="Control Label:" required="1" value={this.state.controlLabel} localChange={this.handleControlLabelChange} inputStyle={{border: this.state.errControlLabelStyle}} />
I was wondering if there is a more elegant way to do that? Here is my code:
this.state.Fields.forEach((field) => {
if(field.props.required === "1"){
var validField = (field.props.value != '' && field.props.value != undefined);
if(!validField){
//set the field style dynamically
}
}
validForm=validForm && validField;
});

Answer 1

You could add validation logic inside Control itself.
var Control = React.createClass({
isValid: function() {
if (!this.props.required) {
return true;
}
return this.props.value !== '' && this.props.value !== undefined;
},
render: function() {
let value = this.props.value;
return <div className={this.isValid() ? 'item valid' : 'item invalid'}>{value}</div>;
}
});
var App = React.createClass({
render: function() {
return (
<div className="container">
{[
{
required: true,
value: ''
},
{
required: true,
value: 'abc'
},
{
required: false,
value: ''
}
].map((v, i) => <Control key={i} required={v.required} value={v.value} />)}
</div>
);
}
});
ReactDOM.render(
<App />,
document.getElementById('container')
);
.valid {
border-color: green;
}
.invalid {
border-color: red;
}
.item {
width: 200px;
height: 50px;
border-width: 1px;
border-style: solid;
margin: 1px;
display: flex;
}
.container {
display: flex;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="container">
<!-- This element's contents will be replaced with your component. -->
</div>