React

by MatanCL

HTML

<div id="app"></div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

React

function App () {
      let [myAray1, setMyArray1] = React.useState(['cat', 'dog', 'fish']);
      let [myAray2, setMyArray2] = React.useState(['cat', 'dog', 'fish']);
      return (
        <div>

            Working, but input is uneditable:

            {myAray1.map(animal => <div>
                <input value={animal}/>
                <button onClick={() => {
                    const me = animal;
                    setMyArray1(myAray = myAray1.filter(animal => animal !== me));
                }}>
                    remove
                </button>
            </div>)}

            <br/>

            Removes the wrong one:

            {myAray2.map(animal => <div>
                <input defaultValue={animal}/>
                <button onClick={() => {
                    const me = animal;
                    setMyArray2(myAray2 = myAray2.filter(animal => animal !== me));
                }}>
                    remove
                </button>
            </div>)}
        </div>
      )
    }

ReactDOM.render(<App />, document.querySelector("#app"))