JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="app"></div>

Babel + JSX

const InputWithAddBtn = props => {
  const [ value, setValue ] = React.useState('');

  return (
    <div>
      <input type="text" value={value} onChange={e => setValue(e.target.value)} />
      <button onClick={() => props.add(value)}>+</button>
    </div>
  );
};

const App = () => {

const initValue = ['apple', 'bread']
  const [ value, setValue ] = React.useState(initValue);

const add = (value) => {
  initValue.push(value)
  console.log(initValue)
  setValue(initValue)
}

  return (
    <div>
      <InputWithAddBtn add={add} />
      <div>{initValue.map((item) => <ul>
        <li>{item}</li>
      </ul>)}</div>
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById('app'));