dynamically created button onclick is not working in react js

Question

I dynamically create a button element in my javascript function and then add an onclick event to that button. But after I press that button I get this error Uncaught ReferenceError: removeQuestionis not defined (removeQuestionis is my function name )

this is the button i created inside of my js function

const addQuestions = () => {
   const removeBtn = '<a color="primary" onClick={removeQuestion}> x</a>';
   window.document.body.insertAdjacentHTML('beforeend', removeBtn);
};

this function are called by onclick

const removeQuestion = () => {
        console.log('test')
    };

You're using insertAdjacentHTML in a React app when you shouldn't be (React deals with DOM updates and doesn't understand when another process interferes). You should add your button to your JSX and show it conditionally based on some state that is triggered at some point. — Andy
– Andy, Commented Jul 14, 2022 at 17:14

Ian · Accepted Answer · 2022-07-15 01:33:20Z

1

ReactJS

Read carefully the Refs and the DOM part of the React documentation.

React is working using virtual DOM.

export default function App() {
  const removeBtns = ['x1', 'x2'];
  const removeQuestion = () => {
    console.log('test');
  };
  return (
    <div className='container'>
      {removeBtns.map((x) => (
        <a key={x} href={'#!'} onClick={removeQuestion}>
          {x}
        </a>
      ))}
    </div>
  );
}

HTML

Try onClick="removeQuestion()" or onClick={removeQuestion()}

The value accepted by onclick in html is the javascript statement executed when clicked.

The value accepted by onclick in javascript is the callback function executed when clicked.

const removeBtn1 = '<a onClick={removeQuestion()}> x1 </a>';
const removeBtn2 = '<a onClick="removeQuestion()"> x2 </a>';

const removeQuestion = () => {
  console.log('test')
};

window.document.body.insertAdjacentHTML('afterbegin', [removeBtn1, removeBtn2]);

Also you can try EventListener.

const removeBtn1 = '<a class="btn"> x1 </a>';
const removeBtn2 = '<a class="btn"> x2 </a>';

window.document.body.insertAdjacentHTML('afterbegin', [removeBtn1, removeBtn2]);

document.querySelectorAll('.btn').forEach(btn => {
  btn.addEventListener('click', () => {
    console.log('test');
  });
});

edited Jul 15, 2022 at 1:33

answered Jul 14, 2022 at 16:52

Ian

1,1921 gold badge7 silver badges16 bronze badges

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

2 Comments

Vivek kalanka Over a year ago

i tryed both of this onClick="removeQuestion()" and onClick={removeQuestion()} but still getting the same error :(

Ian Over a year ago

@Vivekkalanka Sorry, I didn't notice it was reactjs at first, I re-edited and added an example for your reference

vivek kalanka · Accepted Answer · 2022-07-17 16:37:15Z

1

this is issue with insertAdjacentHTML you can use ReactDOM.render

 let input = React.createElement("input",{className:"questionTextInput",name:"textInputQuestion[]"},null);
   ReactDOM.render(input,questionPreview);

answered Jul 17, 2022 at 16:37

vivek kalanka

215 bronze badges

Comments

Vivek kalanka · Accepted Answer · 2022-07-17 16:40:17Z

0

this is issue with insertAdjacentHTML i used React.createElement and after rendered using ReactDOM.render

let input = React.createElement("input",{className:"questionTextInput",name:"textInputQuestion[]"},null);
   ReactDOM.render(input,questionPreview);

answered Jul 17, 2022 at 16:40

Vivek kalanka

1021 gold badge3 silver badges15 bronze badges

Collectives™ on Stack Overflow

dynamically created button onclick is not working in react js

3 Answers 3

ReactJS

HTML

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

ReactJS

HTML

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related