semcmill semcmill - 28 days ago 6
Javascript Question

Passing props through in ReactJS and they won't load, while receiving a target container error?

hopefully someone can shed some light on the recent issues I've been running into. I'm attempting to make a landing page for someone to edit some profile information (username, email, etc.). The problem is when I pass the props from one function to another, they load as undefined. The relevant code is below...

class ChangeFields extends React.Component {
constructor(props) {
super(props);
this.state = {
user: [
{
username: "test"
}
]
}
}
render() {
const formSample = (
<div>
<h3>Account Information:</h3>
<br></br>
<CurrentInfo user={this.state.user} onItemSelect={this.updateInfo()} />
</div>
);
return formSample;
}
}

const CurrentInfo = ({user, onItemSelect}) => {
console.log(user.username);
const formElement = (
<Form horizontal>
<FormGroup controlId="formHorizontalUsername">
<Col componentClass={ControlLabel} sm={2}>
{user.username}
</Col>
<Col sm={10} value={user.username}>
<FormControl controlId="testControl" value={user.username} />
</Col>
</FormGroup>
</Form>
);
return formElement;
};


Unfortunately, the "user.username" in the CurrentInfo block outputs as undefined. Any insight? Note: this is a simplified version of the code, if more is needed I can provide it.

It is also worth noting, that I receive a warning of: Uncaught Error: _registerComponent(...): Target container is not a DOM element.

I have attempted to move my line in index.html to the bottom, as others have suggested but that doesn't fix it.

Answer

Unfortunately, the "user.username" in the CurrentInfo block outputs as undefined. Any insight?

This:

this.state = {
            user: [
                {
                    username: "test"
                }
            ]
        }

should be:

this.state = {user: {username: "test"}};

You're currently setting the user property to an array.

It is also worth noting, that I receive a warning of: Uncaught Error: _registerComponent(...): Target container is not a DOM element.

This is probably happening in code that is not in your question.