// Hooks let you build stateful and dynamic components
import React, { useState } from 'react';
function Example() {
// Declare a new state variable, which we'll call "count" const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}const useCounter = (initialState = 0) => {
const [count, setCount] = useState(initialState);
const add = () => setCount(count + 1);
const subtract = () => setCount(count - 1);
return { count, add, subtract };
};import React, { useState } from "react";
function App() {
const [list, setList] = useState(" ");
const [items, updateOnClick] = useState([ ]);
function updateList(event) {
const valueEntered = event.target.value;
setList(valueEntered);
}
function updateClick(){
updateOnClick(list);
}
return (
<input onChange={updateList} type="text" value={list} />
<button onClick={updateClick}>
<span>Add</span>
</button>
<div>
<ul>
{items.map(item => <li>{item}</li>) }
</ul>
</div>);}
export default App;