CODEWITHSUNDEEP
reactjs
Afnan Nazir
Afnan Nazir

Reputation: 498

React component appears and disappears instantly

I have been given a task where i have to show different components in a div depending upon click on menu. Previously those were shown in tabs(and they were working fine) now i have to remove tabs and show menus instead. My code is this

handleClick: function (name) {
     ReactDOM.unmountComponentAtNode(document.getElementById('main_data'));
        if (name == 'projects') {
            ReactDOM.render(<ListProjects parentThis = {this} />, document.getElementById('main_data'))
        }
        else if (name == 'profile') {
            ReactDOM.render(<div className="inner clearfix">
                    <Avatar parentThis = {this}/>
                            </div>,
                document.getElementById('main_data'))
        }

render: function () {
return (
<div className="row">
                        <div className="col-sm-12">
                            <div className="user-menu">
                                <ul className="dropdown clearfix boxed">
                                    <li key="1"><a href="#" onClick={()=>this.handleClick('projects')}><span>Projects</span></a></li>
                                    <li key="2"><a href="#" onClick={()=>this.handleClick('profile')}><span>Profile</span></a></li>
                                </ul>
                            </div>
                            <div id="main_data">
                              <ListProjects parentThis = {this} />
                            </div>
                        </div>
                    </div>
)
}

Problem is when i click on menu link component appears and disappears instantly and default component gets shown. Unable to find any specific solution online so please help what i am doing wrong.

Upvotes: 3

Views: 13680

Answers (5)

tomstan11
tomstan11

Reputation: 1247

The problem for me was that I was returning content twice. I had this if statement including a return Redirect in two of my components at once, which was causing the error.

render() {
  if (this.props.isAuthenticated) {
    return <Redirect to="/" />;
  }
  return (.....)
}

Upvotes: 0

Neil
Neil

Reputation: 968

This is a simple reason you need to let react manage the mount and unmount of the Dom nodes.

Simply create some state (I presume your in a class component):

state={ selectedUi: undefined }

Then inside your handleClick(), you need to update your state:

this.setState({ selectedUi: name })

Now you just need a JavaScript shortcut to describe your ui, so for projects, when you click it your state should update and display based on this code:

{this.state.selectedUi === “projects” && <ListProjects />}

So to conclude when you click on a different value and change the state the expression will become false and React will remove from the dom.

This means your handler function should be really small now:

handleOnClick = name => this.setState({ selectedUi: name });

Upvotes: 0

Zombkey
Zombkey

Reputation: 345

This is a old one but here, ma contribution : I got the same issue, in a context of symfony 3 + react, both server and client side rendering. Based on this exemple : https://github.com/Limenius/symfony-react-sandbox

When my page loaded, the content was right, but some milliseconds later it was gone. The error was based on the fact I missconfigured my Router for clientside. So the content generated by the server was good, but when the clientside did a render, it found no route to go, so show me a blank page.

Translated in code that's mean the basename was well configured of my <StaticRouter>, but wrong in my <BrowserRouter>.

Upvotes: 0

Afnan Nazir
Afnan Nazir

Reputation: 498

The problem was that when we click on the href link then due to its default behavior page refreshes and component appears and disappears and then default component is shown. Its solution is we pass event on click and then prevent its default behavior like following

<li key="2"><a href="#" onClick={(evt)=>this.handleClick(evt, 'profile')}><span>Profile</span></a></li>

handleClick: function (event, name) {
        event.preventDefault();
        ...
}

Upvotes: 4

Teedub
Teedub

Reputation: 382

I think it's because you unmount the node that you try and re-render to

 ReactDOM.unmountComponentAtNode(document.getElementById('main_data'));
    if (name == 'projects') {
        ReactDOM.render(<ListProjects parentThis = {this} />, document.getElementById('main_data'))
    }

I'm thinking that because you are unmounting the node with id = 'main_data' and then subsequently try to mount to it again, you are seeing the flash.

Upvotes: 2

Related Questions