React JS hover function-CodePudding

Can anybody tell me what is wrong with my code? It is not just working. It should work as I hover a div, function should have changed the visibly, but it is not.

import "./style.scss";
import logo from "./logo.svg";
import { useState } from "react";

function App() {
  const data = [
    {
      day: "mon",
      amount: 17.45,
      checked: false,
      visibility: "hidden",
    },
    {
      day: "tue",
      amount: 34.91,
      checked: false,
      visibility: "hidden",
    },
    {
      day: "wed",
      amount: 52.36,
      checked: false,
      visibility: "hidden",
    },
    {
      day: "thu",
      amount: 31.07,
      checked: false,
      visibility: "hidden",
    },
    {
      day: "fri",
      amount: 23.39,
      checked: false,
      visibility: "hidden",
    },
    {
      day: "sat",
      amount: 43.28,
      checked: false,
      visibility: "hidden",
    },
    {
      day: "sun",
      amount: 25.48,
      checked: false,
      visibility: "hidden",
    },
  ];

  const [list, setList] = useState(data);
  const [show, setShow] = useState(true);

  const colorChanger = (amount) => {
    const newList = list.map((item) => {
      if (item.amount === amount) {
        const updatedList = {
          ...item,
          visibility: "visable",
        };
        return updatedList;
      }
      return item;
    });
    setList(newList);
  };
  return (
    <div className="App">
      <header className="header">
        <div className="header-content" style={{ height: "100px" }}>
          <div>
            <p>My balance</p>
            <h1>$921.48</h1>
          </div>
          <img src={logo} alt="logo" />
        </div>
      </header>
      <main className={"data"}>
        <div className="data-in">
          <div>
            <h1 className="title">Spending - Last 7 days</h1>
            <ul>
              {list.map((item, index) => (
                <div key={index}>
                  <li
                    style={{ visibility: item.visibility }}
                    className="bar-amount"
                  >
                    {item.amount}
                  </li>
                  <div
                    onm ouseOver={() => colorChanger(item.amount)}
                    className="bar"
                    style={{
                      height: 3 * item.amount   "px",
                    }}
                  ></div>
                  <li>{item.day}</li>
                </div>
              ))}
            </ul>
            <hr />
          </div>
          <div className="summary">
            <div>
              <p>Total this month</p>
              <h1 className="title">$478.33</h1>
            </div>
            <div>
              <h3> 2.4%</h3>
              <p>from last month</p>
            </div>
          </div>
        </div>
      </main>
    </div>
  );
}

export default App;

CodePudding user response：

Your spelling in visibility property is wrong. It should be visible instead of visable.

I hope this works!

CodePudding user response：

I have found one problem in your code is visible spelling are incorrect. I have correct visible spelling in Below Code:

import "./style.scss";
import logo from "./logo.svg";
import { useState } from "react";

function App() {
  const data = [
    {
      day: "mon",
      amount: 17.45,
      checked: false,
      visibility: "hidden",
    },
    {
      day: "tue",
      amount: 34.91,
      checked: false,
      visibility: "hidden",
    },
    {
      day: "wed",
      amount: 52.36,
      checked: false,
      visibility: "hidden",
    },
    {
      day: "thu",
      amount: 31.07,
      checked: false,
      visibility: "hidden",
    },
    {
      day: "fri",
      amount: 23.39,
      checked: false,
      visibility: "hidden",
    },
    {
      day: "sat",
      amount: 43.28,
      checked: false,
      visibility: "hidden",
    },
    {
      day: "sun",
      amount: 25.48,
      checked: false,
      visibility: "hidden",
    },
  ];

  const [list, setList] = useState(data);
  const [show, setShow] = useState(true);

  const colorChanger = (amount) => {
    const newList = list.map((item) => {
      if (item.amount === amount) {
        const updatedList = {
          ...item,
          visibility: "visible", // <-- I have changed visible spelling
        };
        return updatedList;
      }
      return item;
    });
    setList(newList);
  };
  return (
    <div className="App">
      <header className="header">
        <div className="header-content" style={{ height: "100px" }}>
          <div>
            <p>My balance</p>
            <h1>$921.48</h1>
          </div>
          <img src={logo} alt="logo" />
        </div>
      </header>
      <main className={"data"}>
        <div className="data-in">
          <div>
            <h1 className="title">Spending - Last 7 days</h1>
            <ul>
              {list.map((item, index) => (
                <div key={index}>
                  <li
                    style={{ visibility: item.visibility }}
                    className="bar-amount"
                  >
                    {item.amount}
                  </li>
                  <div
                    onm ouseOver={() => colorChanger(item.amount)}
                    className="bar"
                    style={{
                      height: 3 * item.amount   "px",
                    }}
                  ></div>
                  <li>{item.day}</li>
                </div>
              ))}
            </ul>
            <hr />
          </div>
          <div className="summary">
            <div>
              <p>Total this month</p>
              <h1 className="title">$478.33</h1>
            </div>
            <div>
              <h3> 2.4%</h3>
              <p>from last month</p>
            </div>
          </div>
        </div>
      </main>
    </div>
  );
}

export default App;

CodePudding user response：

Please correct the spelling of 'visible' :)

visibility: "visable",