React dynamically add html element with event handler

Question

Is it possible to append buttons with event handler in react ?

// This is working fine but its pure javascript onclick , how can I make this element with react js onClick ?

This is reference code , my scenario is appending html code dynamically

const Button = () => {
      const dynamicElement = () => {
           let li = document.createElement('li');
               li.className = 'dynamic-link'; // Class name
               li.innerHTML = "I am New"; // Text inside
               document.getElementById('links').appendChild(li);
               li.onclick = function(){ alert(0) } 
      }

         useEffect(() => {
             dynamicElement();
         }, [])
}

Shotiko Topchishvili · Accepted Answer · 2020-04-02 18:58:46Z

5

You can just convert your function to a functional component like this.

const DynamicElement = () => {
    return (
      <li onClick={()=>alert(0)} className="dynamic-link">I am New</li>
    )
}
const Button = () => {
    const [visible, setVisible] = useState(false);
    useEffect(()=>setVisible(true), [])
    // if visible is true return <DynamicElement/>, either way return null
    return visible ? <DynamicElement/> : null
}

BTW useState is hooks implementation of a state

answered Apr 2, 2020 at 18:58

Shotiko Topchishvili

2,98314 silver badges21 bronze badges

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

Collectives™ on Stack Overflow

React dynamically add html element with event handler

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related