DHSI 2019 - Day 2 Working Code

App.js

import React, { useState } from 'react';
import Headline from './components/Headline';
import NameForm from './components/NameForm';
import Names from './components/Names';

const App = () => {
  const [names, setNames] = useState([])

  return (
    <div>
      <Headline title="Hello" />
      <Names names={names} />
      <NameForm updateMethod={setNames} />
    </div>
  );
}

export default App;

Headline.js

import React from 'react';

const Headline = ({ title }) => (<h1>{title} <small>({title.length})</small></h1>);

export default Headline;

NameForm.js

import React, { useState } from 'react';
import { append } from 'ramda';

const NameForm = (props) => {
  const {
    updateMethod
  } = props;
  const [userInput, setUserInput] = useState('');

  const onChange = (event) => {
    console.log(event.target.value);
    setUserInput(event.target.value)
  }

  const onSubmit = (event) => {
    event.preventDefault();
    updateMethod(append(userInput));
    setUserInput('');
  }

  return (
    <form onSubmit={onSubmit}>
      <div>
        <label htmlFor="name">Enter Your Name</label>
        &nbsp;
        <input
          onChange={onChange}
          value={userInput}
          name="name"
          placeholder="Name"
        />
      </div>
      <div>
        <button type="submit">Add Name</button>
      </div>
    </form>
  );
}

export default NameForm;

Names.js

import React from 'react';

const Names = (props) => {
  const {
    names
  } = props;

  const onClick = (event) => {
    event.preventDefault();
    console.log(event, event.target.innerHTML);
  }

  return (<ul>
    {names.map((name, index) => (
      <li
        key={index}
        style={{ paddingTop: (15 * index) + 'px' }}
        onClick={onClick}
      >
        {name}
      </li>
    ))}
  </ul>)
}

export default Names;