HTML elements not rendering with button's onClick event in React JS

Question

I am relatively new to React and want to render input forms on click of a button. The function called in button's onClick works for stuff like console.log() but does not render the HTML elements. I have absolutely no clue as to why is this happening. I am using function component. Below is the code snippet that is concerned with the problem.

const UserAppointment = () => {
  function renderHtml () {
    return(
      <div>
        <h1>I want this to render on click</h1>
      </div>
    )
  }

  return (
    <div>
      <button onClick={renderHtml}>Render Input forms</button>
      <br /><br /><br />
      <button onClick={()=> { dispatch(logout()) }}>Logout</button>
    </div>
  )
}
export default UserAppointment ;

Answer 1

I suggest you should use state to save and render html:

const UserAppointment  = () => {

    const [html, setHtml] = useState(null);

    function renderHtml () {
        return(
            <div>
                <h1>I want this to render on click</h1>
            </div>
        )
    }


    return (
        <div>
            {html}
            <button onClick={(() => setHtml(renderHtml()))}>Render Input forms</button>

            <br /><br /><br />

            <button onClick={() => { dispatch(logout()) }}>Logout</button>
        </div>
    )

}

Answer 2

Instead of a renderHtml function, have a boolean state. When clicked, toggle the boolean, and conditionally return the JSX when true:

 const App = () => { const [show, setShow] = React.useState(false); return ( <div> <button onClick={() => setShow(!show)}>Render Input forms</button> <br /><br /><br /> <button onClick={()=> { dispatch(logout()) }}>Logout</button> { !show ? null : ( <div> <h1>I want this to render on click</h1> </div> ) } </div> ) }; ReactDOM.render(<App />, document.querySelector('.react'));

 <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <div class="react"></div>

Answer 3

When you use event handlers such as onClick() , React doesn't return any HTML back from the function that you pass in.

Like other commenters said, you need to use React state to manage when your div is shown and when it is hidden.

Answer 4

• First set the state since you are using functional component.

   const [Heading, setHeading] = useState("")

• Then use your onClick event and pass a function to it.

   <button onClick={renderHtml}>Render Input forms</button>

• Set your state to the heading inside renderHtml function.

   const renderHtml =()=> { setHeading("I want this to render on click") }

• Display your heading in h1 in return.

   <h1>{Heading}</h1>

Full code:

const [Heading, setHeading] = useState("")
  const renderHtml =()=> {
    setHeading("I want this to render on click")
  }

  return (
    <div>
      <h1>{Heading}</h1>
      <button onClick={renderHtml}>Render Input forms</button>
      <br /><br /><br />
      <button onClick={() => { dispatch(logout()) }}>Logout</button>
    </div>
  )
}