Guide on rendering a component in React jsx using innerHTML

Question

Guide on rendering a component in React jsx using innerHTML

In my current project, I am developing a feature that allows users to toggle between graph and list views. The view's container is assigned the class name "two".

  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}/>"
  }

When switching to the graph view text ('Graph View!'), everything works as expected. However, when trying to switch back to the list view, I encounter an issue. After executing toggleListView, the content of the 'two' container in Chrome tools shows

<shotlog shotlog="{this.state.shotLog}/"></shotlog>

. It should actually display

<ShotLog shotLog={this.state.shotLog}/>

to correctly pass the props.

I am unsure where the additional quotations are originating from. Do you have any insights?

javascript html css reactjs jsx

Answer 1

Answer №1

Creating React components by embedding them in strings is not the recommended approach. Utilizing JSX, you can simplify your code as shown below:

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

By using a ternary condition, you can dynamically decide what content to render based on the value of a variable, showGraph.

The value of showGraph is stored in the component's state, which can be accessed using this.state. When you need to update the state of a component, you should invoke setState to trigger a re-render and display the desired content.

Here is a functional 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>

If you want to learn more about JSX fundamentals, refer to the official documentation: https://reactjs.org/docs/introducing-jsx.html

For further insights on managing component state, check out this resource: https://reactjs.org/docs/state-and-lifecycle.html

Answer 2

Creating React components by embedding them in strings is not the recommended approach. Utilizing JSX, you can simplify your code as shown below:

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

By using a ternary condition, you can dynamically decide what content to render based on the value of a variable, showGraph.

The value of showGraph is stored in the component's state, which can be accessed using this.state. When you need to update the state of a component, you should invoke setState to trigger a re-render and display the desired content.

Here is a functional 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>

If you want to learn more about JSX fundamentals, refer to the official documentation: https://reactjs.org/docs/introducing-jsx.html

For further insights on managing component state, check out this resource: https://reactjs.org/docs/state-and-lifecycle.html

Answer 3

Answer №2

While I may not be an expert in ReactJS, I believe the best approach is to return the correct content rather than manipulating it with JS:

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

Answer 4

While I may not be an expert in ReactJS, I believe the best approach is to return the correct content rather than manipulating it with JS:

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

Answer 5

Answer №3

Building on @Justinas's response, you may consider implementing a conditional render instead of relying solely on raw JS. Here's an example:

class 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 another view
      }
   }
}

Any changes to the component's state trigger a re-render, effectively replacing the previous content. Just ensure there's a mechanism to toggle or update the state :)

P.S. Apologies for any errors in the react syntax. No IDE at the moment!

Answer 6

Building on @Justinas's response, you may consider implementing a conditional render instead of relying solely on raw JS. Here's an example:

class 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 another view
      }
   }
}

Any changes to the component's state trigger a re-render, effectively replacing the previous content. Just ensure there's a mechanism to toggle or update the state :)

P.S. Apologies for any errors in the react syntax. No IDE at the moment!

Answer 7

Answer №4

If you want to avoid directly accessing the DOM using document.getElementsByClassName, you can leverage the React approach to toggle the view. Take a look at the example I've provided below.

class ToggleComponent 
{

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

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

  }

}


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

       {view === 'graph'} && <span> Graph View! </span> 
       {view === 'list'} && <DataComponent data={data} /> 


     </div>
}



}

Answer 8

If you want to avoid directly accessing the DOM using document.getElementsByClassName, you can leverage the React approach to toggle the view. Take a look at the example I've provided below.

class ToggleComponent 
{

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

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

  }

}


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

       {view === 'graph'} && <span> Graph View! </span> 
       {view === 'list'} && <DataComponent data={data} /> 


     </div>
}



}

Guide on rendering a component in React jsx using innerHTML

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Utilizing Angular: Importing Scripts in index.html and Implementing Them in Components

Can express middleware be tailored for each individual handler within the same route path?

Tips on accessing close autoComplete/TextField title in AppBar

What is the best way to dynamically showcase options in a React application?

How to access class type arguments within a static method in Typescript: A clever solution

What steps can you take to ensure that a single-page-application (SPA) is easily searchable within a SharePoint environment

Is it possible to utilize non-pure objects as state in React?

What are some ways to streamline this D3 script?

Attempting to serialize a form using Ajax and jQuery

creating a fresh window using AJAX in Ext JS

VueJS Error: Unable to access the 'className' property of an undefined variable

Show the message "No results found" if there are no matches, or hide the DIV displaying search results using AJAX and MySQL

Strange issue: the code appears to be running multiple times with just one click

Exploring the functionality of arrays within Selenium IDE

Achieving dynamic population of a second dropdown menu based on selection from the first dropdown menu using PHP

Is there a way to iterate through indexed variables in javascript?

Move the JavaScript code from the <script> element in the HTML file to a

eliminate item from list upon user clicking the button

Gathering the output from every function within an array of functions

Is there a way to prevent pixels from being rendered outside of a designated rectangle in HTML5?