How to render a component using innerHTML in React jsx

Question

I'm currently writing functionality that will toggle between two views, graph and list. two is the name of the class of the view's container.

  toggleGraphView() {
    const two = document.getElementsByClassName('two')[0];
    two.innerHTML = '<span>Graph View!</span>'
  }

  toggleListView() {
    const two = document.getElementsByClassName('two')[0];
    two.innerHTML = "<ShotLog shotLog={this.state.shotLog}/>"
  }

The component switches to the graph view text just fine ('Graph View!') but when I try to switch back to list view, I get nothing. After firing toggleListView, in chrome tools the two container contains <shotlog shotlog="{this.state.shotLog}/"></shotlog>. I need it to look like <ShotLog shotLog={this.state.shotLog}/> in order to pass props correctly.

I'm not sure where the extra quotations are coming from. Any ideas?

Treycos · Accepted Answer · 2018-12-17 09:06:07Z

3

You can not create React components by putting them into strings, using JSX, your code can be shortened to the following :

this.state.showGraph ? <span>Graph View!</span> : <ShotLog shotLog={this.state.shotLog} />

Using a ternary condition, you can decide what to render depending on the value of a variable, showGraph

showGraph will be stored in your component's state, accessible via this.state, when you want to change the value of something in your state, you will have to call setState, this will cause your component to rerender everything on your screen and show you what you want

Working example :

class ShotLog extends React.Component {
  render() {
    return <div>Hi I'm a ShotLog</div>
  }
}


class App extends React.Component {
  constructor(props){
    super(props)
    this.state = { showGraph: true }
  }
  handleClick = ev => {
    this.setState({ showGraph: !this.state.showGraph })
  }
  render() {
    return (
      <div>
        {this.state.showGraph ? 
          <span>Graph View!</span> 
          : 
          <ShotLog />}
        <button onClick={this.handleClick}>Switch me !</button>
      </div>
    )
  }
}
    
ReactDOM.render(
  <App/>,
  document.getElementById('react')
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.0.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.0.0/umd/react-dom.production.min.js"></script>
<div id="react"></div>

You will find the basics of JSX on the following official documentation : https://reactjs.org/docs/introducing-jsx.html

And you can learn more here about the state of your components : https://reactjs.org/docs/state-and-lifecycle.html

edited Dec 17, 2018 at 9:06

answered Dec 17, 2018 at 8:50

Treycos

7,4913 gold badges29 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

oolongloop Over a year ago

Thanks so much! This is exactly what I needed help with. Cheers

Treycos Over a year ago

Glad I could help :)

Justinas · Accepted Answer · 2018-12-17 08:41:18Z

1

I am not expert of ReactJS, but I think you should return proper content instead of trying to change it via JS:

  toggleView() {
      if (this.isGraphView()) {
          return <span>Graph View!</span>;
      } else {
          return <ShotLog shotLog={this.state.shotLog}/>
      }
  }

answered Dec 17, 2018 at 8:41

Justinas

43.9k5 gold badges72 silver badges108 bronze badges

Comments

C.RaysOfTheSun · Accepted Answer · 2018-12-17 08:53:53Z

In conjunction with @Justinas's answer, you can try doing a conditional render instead of doing it with pure JS. You can try something like this:

MyComponent extends React.Component {
  constructor(props) {
      super(props);
      this.state = {currView: 'graph'};
  }

  handleToggle() {
      if (this.state.currView === 'graph') {
          this.setState({currView: 'otherView'});
      } else {
          this.setState({currView: 'graph'});
      }
  }

  render() {
      if(this.state.currView === 'graph') {
          // render your 'graph' view
      } else {
          // render some other view
      }
   }
}

A change to the component's state will cause a re-render so it should completely change whatever was previously there. Just make sure you have something that can toggle or update the state :)

P.S. Sorry if I made some mistakes in the react related syntax. No IDE right now lol

nirazlatu · Accepted Answer · 2018-12-17 09:05:42Z

1

Instead of trying to access the dom directly using document.getElementsByClassName, you can use react way to toggle the view. You can take reference to my example below.

class TestComponent 
{

constructor(props) {
  super(props); 
  this.state = {
    view: 'list', 
    shotLog: someVal
  }

  handleToggle() {
     const modifiedView= this.state.view == 'graph'? 'list': 'graph'; 
     this.setState(() => {
      return {view: modifiedView}; 
     });

  }

}


render() {
     const {view, shotLog} = this.state;
     <div> 
       <button onClick={this.handleToggle}> Toggle </button> 

       {view == 'graph'} && <span> Graph View! </span> 
       {view == 'list'} && <ShotLog shotLog={shotLog} /> 


     </div>
}



}

edited Dec 17, 2018 at 9:05

answered Dec 17, 2018 at 8:57

nirazlatu

9938 silver badges19 bronze badges

Collectives™ on Stack Overflow

How to render a component using innerHTML in React jsx

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related