Add a class to child component when parent component state changes - reactjs

Question

This is my first time attempting to build with React. I typically write UI interaction with jQuery or plain old JS. I simply want a text field which when there is text entered has a class added to it so that I can style it differently to the default state. Note I only want this class adding when there is at least one character entered, not when the field is focused.
I already have an onChange function in the child component which is used to change the state of 'textEntered' but I can't figure out how to make use of this state in the child component to add a class.
Here is my parent component
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import TextInput from './components/TextInput/TextInput';
export default class Form extends Component {
constructor(props) {
super(props);
this.state = {
textEntered: '',
completed: false,
};
}
render() {
return (
<div>
<TextInput
placeholderText={'Title'}
updateText={textEntered => this.setState({ textEntered })}
completed={this.state.completed}
/>
</div>
);
}
}
ReactDOM.render(<Form />, document.getElementById('react-create-form'));
And here is the child component
import React, { PropTypes } from 'react';
const TextInput = props => (
<div>
<input
type={props.type}
placeholder={props.placeholderText}
onChange={e => props.updateText(e.target.value)}
data-completed={props.completed}
/>
</div>
);
TextInput.propTypes = {
type: PropTypes.string,
placeholderText: PropTypes.string,
updateText: PropTypes.func,
completed: PropTypes.bool,
};
TextInput.defaultProps = {
type: 'text',
};
export default TextInput;

Answer 1

Pass the class name from parent component, and also put the check on that. If text field has atleast one character then pass the actual class name otherwise blank string.
Since you are storing the value of text field inside state of parent component so put the condition like this:
customClass = {this.state.textEntered.length ? 'actualClassName': ''}
Code:
<div>
<TextInput
customClass={this.state.textEntered.length ? 'actualClassName': ''}
placeholderText={'Title'}
updateText={textEntered => this.setState({ textEntered })}
completed={this.state.completed}
/>
</div>
Inside child component apply this customClass.
const TextInput = props => (
<div>
<input
type={props.type}
className={props.customClass}
placeholder={props.placeholderText}
onChange={e => props.updateText(e.target.value)}
data-completed={props.completed}
/>
</div>
);
Note: Another way is, pass the value in props instead of passing the class name and put the condition inside child component directly.