How to change the button text on click

Question

import React from "react"; function ToDoItem(props) { function but(){ document.getElementById('testBtn').value='ok' } return ( <div > <li>{props.text} <button class="deletebtn" onClick={() => { props.onChecked(props.id); }}><span>Delete</span></button> </li> <hr/> <input type="button" value="Test" id="testBtn" onclick={but}/> </div> ); } export default ToDoItem;

I wrote this function to change the value of the id from from "Test" to "ok", but I donot know why it is not working. When I use onclick="but()" instead of onclick={but}, it says the function but() is unused. I am not why is this not working. Please help

Answer 1

This is how you do it in React. You dont mix react, with DOM manipulation:

import React, {useState} from "react";

function ToDoItem(props) {
  const [buttonText, setButtonText] = useState('Test');

  return (
    <div>
      <li>
        {props.text}
        <button
          class="deletebtn"
          onClick={() => {
            props.onChecked(props.id);
          }}
        >
          <span>Delete</span>
        </button>
      </li>

      <hr />

      <input
        type="button"
        value={buttonText}
        id="testBtn"
        onClick={() => setButtonText("Ok")}
      />
    </div>
  );
}

export default ToDoItem;

And an, update for follow-up question. With the styling it depends what kind of styling you use in your react application. But you could use inline styling to get the behaviour you want. I for one use styled components when working in React...here's an updated code.

import React, { useState } from "react";

function ToDoItem(props) {
  const [buttonText, setButtonText] = useState("Test");
  const [buttonColor, setButtonColor] = useState("red");

  const changeButton = () => {
    setButtonText(buttonText === "Test" ? "Ok" : "Test");
    setButtonColor(buttonColor === "red" ? "blue" : "red");
  };

  return (
    <div>
      <li>
        {props.text}
        <button
          class="deletebtn"
          onClick={() => {
            props.onChecked(props.id);
          }}
        >
          <span>Delete</span>
        </button>
      </li>

      <hr />

      <input
        style={{ backgroundColor: buttonColor }}
        type="button"
        value={buttonText}
        id="testBtn"
        onClick={changeButton}
      />
    </div>
  );
}

export default ToDoItem;

Answer 2

Adding to my comments, your code reimplemented with hooks.

 import React, { useState } from "react";
 
 function ToDoItem(props) {

   const [value, setValue] = useState('Test');
 
   function but(){
     setValue('ok');
   }
 
 
   return (
     <div>
       <li>{props.text} <button class="deletebtn" onClick={() => {
         props.onChecked(props.id);
       }}><span>Delete</span></button>
      
       </li>
 
         
       <hr/>
 
       <input type="button" value={value} id="testBtn" onclick={but}/>
       
    
     </div>
   );
 }
 
 export default ToDoItem;