Abdennour TOUMI Abdennour TOUMI - 3 months ago 7
React JSX Question

parse body of react tag

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

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);
}