React Component - Rendering component inside a div when user click link

Question

I have a react component and a htlm list withy 2 links in LI.

I need the components inside it to render only on demand.

Here is the current code:

import React from 'react';

import ComponentOne from 'componentone';
import ComponentTwo from 'componenttwo';

const MyComponent = (props) => <div>

    <ul>
        <li id="show-one">
            <a href="#">Show One</a>
        </li>
        <li id="show-two">
            <a href="#">Show Two</a>
        </li>
    </ul>

    <div id="content-wrapper">
        <ComponentOne />
        <ComponentTwo />
    </div>

</div>

export default MyComponent

In the content-wrapper you can see the two components... <ComponentOne /> and <ComponentTwo />

What I need to do is for <ComponentOne /> to show when the user clicks <li id="show-one"> ....

and for <ComponentTwo /> to show when the user clicks <li id="show-two">

How can I do this?

Answer 1

There are a lot of ways of doing this. I'd suggest you probably want to look at using a routing library, React Router is probably the most popular and well worth a look.

Alternatively here is a basic state based solution:

import React from 'react';

import ComponentOne from 'componentone';
import ComponentTwo from 'componenttwo';

class MyComponent extends React.Component {
  constructor(props) {
    super(props);

    state = {
      displayComponent: 'one'  // key defining which component to display
    }
  }

  selectComponent(component) {
    this.setState({
      displayComponent: component  // set the component you want to display
    })
  }

  render() {
    const {displayComponent} = this.state;

    return(
      <div>
        <ul>
          <li id="show-one">
              {/* When clicked, set `displayComponent` to 'one' */}
              <a onClick={() => this.selectComponent('one')}>Show One</a>
          </li>
          <li id="show-two">
            <a onClick={() => this.selectComponent('two')}>Show Two</a>
          </li>
        </ul>

        <div id="content-wrapper">
            {/* only render the component that matches the state */}
            {/* this could easily be a switch() statement as well */}
            {displayComponent === 'one' && <ComponentOne />}
            {displayComponent === 'two' && <ComponentTwo />}
        </div>
      </div>
    );
  }
}

export default MyComponent

Answer 2

Use Routing Mechanism for your problem. References: Use import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';

Answer 3

import React, {Component} from 'react';
import ComponentOne from 'componentone';
import ComponentTwo from 'componenttwo';

class MyComponent extends Component  {

  state = {
    show:""
  }      

  render() {

    let content = null;
    if(show === "showOne"){
      content = <ComponentOne />;
    }else if (show === "showTwo"){
      content = <ComponentTwo />;          
    }

    return (
     <div>
        <ul>
         <li id="show-one">
          <button onclick={this.setState({ show: "showOne" })}>Show One</button>
         </li>
         <li id="show-two">
          <button onclick={this.setState({ show: "showTwo" })}>Show Two</button>
         </li>
        </ul>

        {content}
     </div>
    )
  }
}

You get the idea. Play around with this.

Answer 4

I have confusion over your question, so, I'll try to answer both the cases. But in both cases you need to attach a state variable which handles the display state of both the components

You can do something on the lines of -- <a onClick={this.showComponentOne}>...</a> and your function call should be something like

showComponentOne() { this.setState({showComponentOne: !this.state.showComponentOne});}

1. First case if you need to render the components outside the <li> tag. You can attach a condition to the content-wrapper like this.state.showComponentOne && <ComponentOne /> . Repeat the same for the second component.
2. If you need to render it inline at the <li> level. You can do something like <a href="#">Show One</a> {this.state.showComponentOne && <ComponentOne />}

Answer 5

try somehting like this:
what this does is render an element on a element with the id you define when you click the li element

const MyComponent = (props) =>( 
  <div>
    <ul>
      <li id="show-one" onClick={ () => ReactDOM.render(<ComponentOne/>,document.getElementById('showhere'));}>
        <a id ="showhere" href="#">Show One</a>
      </li>
      <li id="show-one" onClick={ () => ReactDOM.render(<ComponentTwo/>,document.getElementById('showhere2'));}>            
        <a href="#" id="showhere2">Show Two</a>
      </li>
   </ul>
  <div id="content-wrapper">
    <ComponentOne />
    <ComponentTwo />
  </div>

)