chefcurry7 chefcurry7 - 11 months ago 85
React JSX Question

React clone children & attach props not working

I have this piece of code

render() {
const { schools, currentSchool, claims } = this.state;
let loggedIn = this.state.loggedIn ? true : false;
let user = this.state.user;

var children =, function (child) {
return React.cloneElement(child, {
return (
onLogin={this.onLoginButtonClick} />

{ loggedIn && <NavContainer claims={claims}/> }



however I don't have access to
for some reason as "this" is undefined . Why is that and how can I resolve this?

Answer Source

There are 2 ways you can achieve this one is in render function use that = this let that = this; and then in the function instead of use:

return React.cloneElement(child, {//use that variable here } )

or the other way you can achieve this is by using arrow function

var children = => { return React.cloneElement(child, { **claims:** })

javascript is all about scope and variables in javascript are function scoped not block scoped. Read more about scope in javascript.