Simplest way to use onClick to render in React?

Question

Im looking for a way to display an image when a button is toggled on. It seems like a simple enough task, and would help me greatly to understand how to do it. I have tried something like this, but it does not render anything.

This is the function that returns the svg image:

import dfElement from '../vectors/dfElement.svg';

function renderElement(){
  return  <img src={dfElement}/>
}

This is the class that calls the function to return svg:

class DF extends Component {

    render() {

      return (

      <div >

        <div >
        <button onClick={this.renderElement}>df</button>
        </div>

      </div>
    );
  }
}

export default DF

What error have you got in the console? – Arturas Lapinskas May 13 '20 at 06:26 — Arturas Lapinskas, May 13 '20 at 06:26

kyun · Accepted Answer · 2020-05-13T06:35:01.153

I've used Functional Component with useState().

It's a simpler way to make a component.

ref > https://en.reactjs.org/docs/hooks-intro.html

function App(){
  const [toggle, setToggle] = React.useState(false);
  
  return (
    <div>
      <button onClick={()=>setToggle( (prev) => (!prev) )}>Toggle!</button>
      <br/>
      {
        toggle && <img src='https://2.imimg.com/data2/LQ/QV/MY-/teddy-small-size-500x500.jpg' />
      }
    
    </div>
  )
}

ReactDOM.render(<App />, document.getElementById('root'));

<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 id="root" />

Simplest way to use onClick to render in React?

1 Answers1