Why component is not working in React JS?

Question

i am trying to make button and after make button i want to make ad event lisner on by click on this button it will show some message but i am able to create only button but not able to add event listener on it.please help me on it.

function Button()
{
    return (
        <button id='btn'>Masai</button>
    );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(Button());
function showAlert()
{
    return(
        <p>You clicked Masai!</p>
    );
}

const msg=ReactDOM.createRoot(document.querySelector('#message'));
document.querySelector('button').addEventListener('click',()=>{
    msg.render(showAlert());

})

error described in image in console part

You need to add event handlers in React not outside it, new docs will guide you beta.reactjs.org/learn/… — Azzy
– Azzy, Commented Nov 5, 2022 at 5:56
this is not how things should be done in reactjs. please refer to the docs (reactjs.org/docs/getting-started.html#learn-react) and learn reactjs a little before asking any question like this one here. — Meet Bhalodiya
– Meet Bhalodiya, Commented Nov 5, 2022 at 6:00

Humail Saleem · Accepted Answer · 2022-11-05 06:33:17Z

1

This is not the way that you are trying to do in react.

In Your Index.js

import React from 'react';
    import ReactDOM from 'react-dom/client';
    import './index.css';
    import Button from './Button';
    import reportWebVitals from './reportWebVitals';
    import { BrowserRouter } from 'react-router-dom';
    
    const root = ReactDOM.createRoot(document.getElementById('root'));
    root.render(
      <BrowserRouter>
        <Button/>
      </BrowserRouter>
    );
    reportWebVitals();

In Your Button.js

 function Button() {
    
    const clickEvent = () => {
    
      alert("You clicked Masai!");
    }
    
      return(
             <button id='btn' onClick={clickEvent}>Masai</button>
        );
    
    }

answered Nov 5, 2022 at 6:33

Humail Saleem

1621 gold badge3 silver badges13 bronze badges

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

Collectives™ on Stack Overflow

Why component is not working in React JS?

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