Javascript - Oncheckbox display only same row delete button

ramu
October 16, 2023
254 views
0 votes
2 Answers

On check box checked i want to display only same row delete button instead of all delete button.

I have written code to delete the concern of checkbox row. Delete button is working, But when i checked

checkbox all delete buttons displaying instead of one delete button.

// Reactjs
const games = ['cricket', 'vollyboll', 'vollyball'];
  const [game, setGame] = useState(games);
  const [myCheck, setMyCheck] = useState(false)

  const deleteItem = (itemindex)=>{
    let removeGame = game.filter((ele, i)=>{
      return i!==itemindex
    });
    setGame(removeGame)
  }
 // const checkedBoxes = (e) =>{
  //   const {myCheck, isChecked} = e.target;
  //   if(myCheck === isChecked){
  //     return <button onClick={()=>deleteItem(i)}>Delete</button>
  //   }
  // }
  return (
    <div className="App">
      <h3>Play Games</h3>
      {
        game.map((ele, i)=>{
          return(
            <div key={i}>
             <li> 
              <input type="checkbox" value={myCheck} onChange={(e)=>setMyCheck(true)}/> {ele}
              {
                myCheck ?  <button onClick={()=>deleteItem(i)}>Delete</button>: null
              }
              </li>
            </div>
          )
        })
      }
    </div>
  );
}

On check box checked i want to display only same row delete button instead of all delete button.

Tags: javascript reactjs

Answers

Instead of using a boolean for myCheck, you can use the index of the button, kinda the same idea as you use in the remove function.

Then you can alter the check to myCheck === i to only show the button next to the matching checkbox

const { useState } = React;

const Example = () => {

    const games = ['cricket', 'vollyboll', 'vollyball'];
    
    const [game, setGame] = useState(games);
    const [myCheck, setMyCheck] = useState(-1)

    const deleteItem = (itemindex)=>{
    let removeGame = game.filter((ele, i)=>{
      return i!==itemindex
    });
    setGame(removeGame)
    setMyCheck(-1)
  }

    return (
    <div className="App">
      <h3>Play Games</h3>
      {
        game.map((ele, i)=>{
          return(
            <div key={i}>
             <li> 
              <input type="checkbox" value={myCheck} onChange={(e)=>setMyCheck(i)}/> {ele}
              {
                (myCheck === i) ?  <button onClick={()=>deleteItem(i)}>Delete</button>: null
              }
              </li>
            </div>
          )
        })
      }
    </div>
  );
}
ReactDOM.render(<Example />, document.getElementById("react"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="react"></div>

This will do the work

const [games, setGames] = useState([
    {
      label: 'cricket',
      showDelete: false
    },
    {
      label: 'vollyboll',
      showDelete: false
    },
    {
      label: 'football',
      showDelete: false
    }
  ]);

  const deleteItem = (itemindex) => {
    let removeGame = games.filter((ele, i) => { return i !== itemindex });
    setGames(removeGame);
  }

  const toggleDeleteButton = (index) => {
    games[index]['showDelete'] = !games[index]['showDelete'];
    setGames([...games]);
  }

  // const checkedBoxes = (e) =>{
  //   const {myCheck, isChecked} = e.target;
  //   if(myCheck === isChecked){
  //     return <button onClick={()=>deleteItem(i)}>Delete</button>
  //   }
  // }

  return (
    <div className="App">
      <h3>Play Games</h3>
      {
        games.map((ele, i) => {
          return (
            <div key={ele.label}>
              <li>
                <input type="checkbox" value={ele.showDelete} onChange={(e) => toggleDeleteButton(i)} /> {ele.label}
                {
                  ele.showDelete ? <button onClick={() => deleteItem(i)}>Delete</button> : null
                }
              </li>
            </div>
          )
        })
      }
    </div>
  );

Please signup or login to give your own answer.

Click here to cancel reply.

Javascript – Oncheckbox display only same row delete button

Answers