apptem

const App = () => {
    const [ list, setList ] = useState([]);
    const [ input, setInput ] = useState('');
    const [ inputEdit, setInputEdit ] = useState('');
    const [ inputbox, setInputbox ] = useState('');
 
    const onChange = e => {
        setInput(e.target.value);
    };
    
    const onChangeEdit = (e) => {
        
        setInputEdit(e.target.value);
        
    };

    const onInsert = e => {
        const nextList = list.concat(input);
        setList(nextList);
        setInput('');
    };

    const onRemove = (value, index) => {
        setList(list.filter((_,i) => i !== index))
    }

    const onEdit = (value, index, inputEdit) =>{
        console.log(inputEdit)
        list[index]=inputEdit
        setList(list)
        setInputEdit('')
    }
    
    return (
        <div>
            <input value={input} onChange={onChange} />
            <button onClick={onInsert}>Add</button>
        <input value={inputEdit} onChange={ e => onChangeEdit(e)  }/>
            <ul>
                {list.map((value, index) => (
                    <li key={index}>
                        {value}
                        <button type="button"
                            onClick={() => onRemove(value, index)}
                        >
                            Remove
                        </button>
                        <button type="button"
                            onClick={() => onEdit(value, index, inputEdit)}
                        >
                            Edit
                        </button>
                    </li>
                ))}
            </ul>
        </div>
    );
};

export default App;















4asfafsaf

1251







                   {/* <input value={inputReply} onChange={onChangeReply} />
                        <button onClick={onInsertReply(index)}>Reply</button>
                        {listReply.map((valueReply, indexReply) => (
                          <div key={indexReply}>
                            {valueReply}
                          </div>
                        ))} */}
               

{/* 
                        <button type="button"
                            onClick={() => onRemove(value, index)}
                        >
                            Remove
                        </button>


                        <button type="button"
                            onClick={() => onEdit(value, index, inputEdit,inputbox)}
                        >
                            Edit
                        </button>

                        
                        <input value={inputbox[index]} onChange={ e => onChangeEdit(e,index)} id={index}/>
                    */}