DHSI 2019 - Day 2 Exercise Solutions

LongestWord.js

import React, { useState } from 'react';
import { longestWord } from './day01/exercises';

const LongestWord = () => {
  const [words, setWords] = useState('');

  const onChange = (event) => setWords(event.target.value);

  return (
    <div>
      <h1>Your Longest Word: {longestWord(words)}</h1>
      <textarea
        rows="24"
        cols="80"
        onChange={onChange}
        value={words}
      />
    </div>
  );
}

export default LongestWord;

Names.js

import React from 'react';
import { remove } from 'ramda';

/*
This is the Names.js file we wrote as a class but with the addition of user deletion.

I've marked the changes below.
*/

const Names = (props) => {
  const {
    names,
    setNames // Now we also need setNames (to delete from an array)
  } = props;

  /*
  This function is new. It is passed an array index. When run, it asks the user to confirm deletion and if confirmed, it will delete the item at the supplied index.

  If you have questions about the remove call, see the Ramda documentation: https://ramdajs.com/docs/#remove
  */
  const removeName = (index) => {
    const yesDelete = global.confirm(`Are you sure you want to delete ${names[index]}?`);
    if(yesDelete) {
      setNames(remove(index, 1));
    }
  }

  return (<ul>
    {names.map((name, index) => (
      <li
        key={index}
      >
        {name}
        <small>
          <button
            onClick={() => removeName(index)}
          >x</button>
          {/* We attach an anonymous funciton as an event handler because we don't need event.target to remove our array, but we do need the array index. This is perfectly acceptable React code. */}
        </small>
      </li>
    ))}
  </ul>)
}

export default Names;