How do I change class names for dynamic children? - reactjs

Question

I want to have the email address validate onBlur and change the class to invalid, so the guest knows. How do I do that with dynamic children? Also, this is my first time playing with React, so feel free suggest better conventions.
https://jsfiddle.net/reactjs/69z2wepo/
var EmailList = React.createClass({
getInitialState: function() {
return { emailInputs: [this.createInput()] };
},
validateEmail: function(event) {
var email = event.target.value;
var re = /^([\w-]+(?:\.[\w-]+)*)#((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
return re.test(email);
},
createInput: function() {
return <li><input class="email" onBlur={this.validateEmail} type="text" placeholder="Email Address"/></li>
},
getEmailInputs: function() {
if (this.state.emailInputs.length < this.props.quantity) {
// Add inputs
for(var x = this.state.emailInputs.length; x < this.props.quantity; x++) {
this.state.emailInputs.push(this.createInput())
}
} else {
// Remove inputs
for(var x = this.state.emailInputs.length; x > this.props.quantity; x--) {
this.state.emailInputs.pop()
}
}
return this.state.emailInputs;
},
render: function() {
return <ol>
{this.getEmailInputs()}
</ol>
}
});
React.render(<EmailList quantity="5" />, document.getElementById('container'));

Answer 1

First of all "NEVER mutate this.state directly, as calling setState() afterwards may replace the mutation you made. Treat this.state as if it were immutable."
https://facebook.github.io/react/docs/component-api.html
Use this.setState({myarray:[email]}); instead. Loop and add the complete array to the state with setState then render {this.state.myarray}
In fact I would put the quantity in the state and add the corresponding number of div to an array and render this array (without stocking this array in the state, just the quantity prop).
To answer your initial question I would just change the class using jquery(event.target)... because I'm lazy. But I suspect using the state to store the state ;) would be cleaner. (An array of the state of each div binded with the keys, btw react will probably ask for keys)
I hope it helps

Answer 2

The React convention is to use render() to generate content which is a reflection of your component's current state. As such, the bits which can change are usually modelled as state which is either passed in as props or stored in the component's own state.
In this case you need some state for each each email input, so at a minimum you'll need value and valid state for each one. Since there are a list of inputs, the state could be a list of objects with value and valid properties:
var DEFAULT_FIELD = {name: '', valid: null}
// ...
getInitialState() {
return {
fields: Array(this.props.quantity).fill(DEFAULT_FIELD)
}
},
With this state, you could render the fields something like this:
render() {
return <ol>
{this.state.fields.map((field, index) => <li>
<input className={'email' + field.valid === false ? ' invalid' : ''}
key={index}
value={field.value}
placeholder="Email Address" />
</li>)}
</ol>
}
This will be read-only because you haven't provided a way for input to update the state. You need to know which index the edited field corresponds to in the array in your state:
handleChange(index, event) {
// Update this.state.fields[index] with new value
},
// ...
render() {
return <ol>
{this.state.fields.map((field, index) => <li>
<input className={'email' + field.valid === false ? ' invalid' : ''}
key={index}
value={field.value}
placeholder="Email Address"
onChange={this.handleChange.bind(this, index) />
</li>)}
</ol>
}
You'll also need the index for onBlur validation:
handleBlur(index, event) {
// Update this.state.fields[index] with new validation status
},
// ...
render() {
return <ol>
{this.state.fields.map((field, index) => <li>
<input className={'email' + field.valid === false ? ' invalid' : ''}
key={index}
value={field.value}
placeholder="Email Address"
onChange={this.handleChange.bind(this, index)
onBlur={this.handleChange.bind(this, index) />
</li>)}
</ol>
}
I have a runnable full implementation of this which uses React's update() immutability helper to avoid mutating the state:
https://gist.github.com/insin/407de6bb93dfe077433f
If you download and extract this Gist and run npm install, running npm start will start a webpack dev server on http://localhost:3000 which supports hot reloading so you can play about with it - e.g. tweak the quantity prop being passed from App.js.