How to delete this div in React - html

Question

When the button is clicked I want an area to write an e-mail. And when the delete icon is clicked, this area is deleted. How can i do
addListItem = () => {
var number=0;
var list = [...this.state.list];
number++;
var ele=
<div id={number}>
<span>{number}
<TextField id="standard-basic" style={{width:"60%"}}></TextField>
</span>
<IconButton>
<Delete></Delete>
</IconButton>
</div>
list.push(ele)
this.setState({list})
}
<Button onClick={this.addListItem} style={{ float : "left" ,marginTop:10,backgroundColor: "#657c9e", borderRadius: 4, boxShadow: "#727272", width: 159, height: 46 , color: Color.AIRPLATFORM.WHITE , fontSize: 15 , fontWeight: 500,marginLeft:0}} variant="contained">ADD</Button><br></br><br></br><br></br>
<div id="list" style={{backgroundColor:"#ffffff",borderRadius:16,padding:10,minHeight:140,width:406,borderRadius:8,marginTop:10,boxShadow: "0px 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 2px 1px -1px rgba(0, 0, 0, 0.12), 0 1px 0 rgba(0, 0, 0, 0.14)"}}>
{this.state.list}
</div>
Here is my code

Answer 1

You can do conditional rendering. So, what conditional rendering is, you render the JSX element based on a condition.
Conditional rendering
{condition ? <p>True</p> : <p>False</p>}
This one will render True paragraph if condition is ture, and False paragraph if condition is false
{condition && <p>True</p>}
This one will render True only if condition is True, and render nothing otherwise
In your case
In your case, first you need a state variable to store the render choice
const [renderDelete, setRenderDelete] = useState(true)
Then, on click you set renderDelete to false:
<button onClick={() => setRenderDelete(false)> Render Delete </button>
Lastly, you conditional render based on the renderDelete variable:
Instead of <Delete /> you render:
{renderDelete && <Delete />}
You can do the same logic to toggle between rendering Edit field or Delete field:
{renderDelete ? <Delete /> : <Edit />}