CODEWITHSUNDEEP
reactjs
Ram_T
Ram_T

Reputation: 8484

How to replace components with each other in react js?

onClick in login component, I have to display Home component and onClick in home component I have to display login component. But Getting this error

Uncaught Error: Element type is invalid: expected a string (for built-in
components) or a class/function(for composite components) but got: object(...)

please help me to resolve this.

Login

handleSubmitValidateInput: function(e){
    e.preventDefault();
    ReactDOM.unmountComponentAtNode(document.getElementById('content'));
    ReactDOM.render(<Home UserDetails={data}/>, document.getElementById('content'));
}

Home

handleLogout: function(e){
    e.preventDefault();
    ReactDOM.unmountComponentAtNode(document.getElementById('content'));
    ReactDOM.render(<Login />, document.getElementById('content'));

But I am able to render both in another component. When I click in Home component, I am getting the error.

Upvotes: 3

Views: 3413

Answers (1)

JorgeObregon
JorgeObregon

Reputation: 3310

You definitely need to take a look at https://github.com/ReactTraining/react-router to handle the navigation between pages. You should NOT manipulate the DOM directly, since this is against React's way of doing things, since React uses a virtual DOM to keep the state in sync with the real DOM, but that's out of the scope of the question.

The only time you are 'ok' to touch the DOM directly is when you render the whole app for the very first time. Something like this:

ReactDOM.render(<MyApp />, document.getElementById('content'));

For any additional DOM manipulations, use the data bindings, and let React do its magic.

Upvotes: 2

Related Questions