MERN SHOW

Let's add a function that will select a holiday when a mouse hovers over one in our list

First, let's add a property to state

const [holidays, setHolidays] = useState([]);
const [holiday, setHoliday] = useState(null);

Let's call setHoliday on mouseover. Again because we want to pass an argument, we must wrap this in an anonymous function

<tr key={index} onMouseOver={() => setHoliday(holiday)}></tr>

Let's show our Show component if holiday has a non false-y value, right after our table

<Show holiday={holiday} />

Create and import the Show component

const Show = ({ holiday }) => {
  if (holiday === null) {
    return null;  
  }

  const celebrated = holiday.celebrated ? "Yes" : "No";

  return (
    <div>
      <h2>{holiday.name}</h2>
      <h3>Celebrated: {celebrated}</h3>
      <p>{holiday.description}</p>
      <p>Likes: {holiday.likes}</p>
      <ul>
        {holiday.tags.map((tag) => (
          <li>{tag}</li>
        ))}
      </ul>
    </div>
  );
};

export default Show;

Import into App.js

import Show from "./components/Show.js";

COMPLETED CODE:

App.js

import "bulma/css/bulma.css";
import { useEffect, useState } from "react";
import NewForm from "./components/NewForm";
import Show from "./components/Show";

const App = () => {
  const [holidays, setHolidays] = useState([]);
  const [holiday, setHoliday] = useState(null);

  const addHoliday = (holiday) => {
    setHolidays([...holidays, holiday]);
  };

  const deleteHoliday = (id) => {
    fetch("/holidays/" + id, {
      method: "DELETE",
    }).then((response) => {
      setHolidays(holidays.filter((day) => day._id !== id));
    });
  };

  useEffect(() => {
    fetch("/holidays")
      .then(
        (data) => data.json(),
        (err) => console.log(err)
      )
      .then(
        (parsedData) => setHolidays(parsedData),
        (err) => console.log(err)
      );
  }, []);

  return (
    <div className="container">
      <h1 className="title">Holidays! Celebrate!</h1>
      <NewForm handleAddHoliday={addHoliday} />
      <Show holiday={holiday} />
      <table>
        <tbody>
          {holidays.map((holiday) => {
            return (
              <tr key={holiday._id} onMouseOver={() => setHoliday(holiday)}>
                <td> {holiday.name}</td>
                <td onClick={() => deleteHoliday(holiday._id)}>X</td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
};

export default App;