How to edit from an array using React js
1 min readJun 25, 2021
const { useState, useEffect } = React;const App = () => {const [namesArray, setNamesArray] = useState(["google"]);const [name, setName] = useState("");const handleChange = (e) => {const result = e.target.value;setName(result);};const handleSubmit = (e) => {e.preventDefault();const newArray = namesArray.concat(name);setNamesArray(newArray);setName("");};const removeItem = (i) => {const newArray = [...namesArray];newArray.splice(i, 1);setNamesArray(newArray);};//Edit functionalityconst editItem = (index) => {const nameInput = prompt("Enter new name");if (nameInput.trim().length !== 0) {const result = namesArray.map((ele, i) => {if (index === i) {return [...nameInput];} else {return ele;}});setNamesArray(result);}};return (<div><form onSubmit={handleSubmit}><label>Enter the name to add</label><br /><inputtype="text"value={name}placeholder="add Element to an array"onChange={handleChange}/><br /><br /><input type="submit" value="add Name" /></form><ul>{namesArray.map((ele, i) => {return (<li key={i}>{ele} <button onClick={() => editItem(i)}>Edit</button><button onClick={() => removeItem(i)}> remove </button></li>);})}</ul></div>);};ReactDOM.render(<App />, rootHandle);
