React useState

by jonahe

HTML

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

CSS

* {
  margin: 10px;
}

React

const { useState } = React;

function Test() {
	
  // array states
  const [names, setNames] = useState(["Kajsa", "Stina", "Kevin", "Kalle"]);
 	const [visibleIndexes, setVisibleIndexes] = useState(names.map((_, index) => index));
  
  // boolean state
  const [shouldReverseNames, setShouldReverseNames] = useState(false);
  
  // string state
  const [nameToAdd, setNameToAdd] = useState("");
  
  
  return (
    <div>
      <button onClick={ () => setShouldReverseNames( !shouldReverseNames ) }>Reverse names</button>
        <hr></hr>
        <input onChange={ evt => setNameToAdd( evt.target.value )  }  name="newName" value={nameToAdd} />
        <button onClick={ () => {
        		if(nameToAdd.trim().length === 0) return;
            // add name
						setNames( names.concat(nameToAdd) );
            // clear input
            setNameToAdd("");
          } 
         }>Add name</button>
      <ol>
        {names.map((name, nameIndex) => (
          <li key={name + nameIndex }>
            <button onClick={ () => {
            	setVisibleIndexes( 
              	visibleIndexes.includes(nameIndex) ? 
                	// remove index if it was already visible
                	visibleIndexes.filter(index => index !== nameIndex) : 
                  // add index if it was not already visible
                  visibleIndexes.concat(nameIndex) 
               	);
            	}
             } >
              <span>{ shouldReverseNames ?  name.split("").reverse().join("") : name  } - </span>
              <span>{ visibleIndexes.includes(nameIndex) ? "visible" : "not-visible"}</span>
            </button>
          </li>
        ))}
      </ol>
    </div>
  )
}

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