parse body of react tag - parsing

Question

Assuming we have :
class Email extends React.Component{
constructor(props){
super(props);
}
validate(){
return true;
}
render(){
<input placeholder={this.is.what.i.ask.for.to.be.parsed.from.its.body} onFocus={this.validate} />
}
}
Now When , I resue it, i want to call :
<Email >
someone#company.com
</Email>
How to parse someone#company.com from the body of Email tag.
I Knew that it can be done by calling <Email holder="someone#company.com" /> & i must update render by this.props.holder.
Therefore, we access to React Attributes by this.props, HOWEVER, Is there something to access its body with the Built-in way ?

Answer 1

If I understand you correctly, then you should use this.props.children:
render() {
return (<input placeholder={this.props.children} onFocus={this.validate} />);
}
As an aside, remember that you need to bind this for your onFocus callback! A popular way to do this is from within the constructor:
constructor(props) {
super(props);
this.validate = this.validate.bind(this);
}

Answer 2

this.props.children gives you access to a Component's children. In this case the email address content would be considered a child of Email Component.
It would probably be best to use the React.Children.only utility to make sure that there is only a single child.
Something like this should work:
class Email extends React.Component{
constructor(props){
super(props);
}
validate(){
return true;
}
render(){
return <input placeholder={React.Children.only(this.props.children)} onFocus={this.validate} />;
}
}