Ninety9Balloons's questions

Estou trabalhando neste desafio do Frontend Mentor e já dominei a maioria das funcionalidades. Consigo filtrar os dados por suas isActivepropriedades para exibir os itens corretos, independentemente de estarem ativos ou não. O que não consigo descobrir é como atualizar isActiveo status de um item individual e fazer com que ele renderize o aplicativo novamente ao alternar para mover o item para o filtro correto.

Aqui está o código para App.jsx:

function App() {
  const [data, setData] = useState([]);
  const [filteredData, setFilteredData] = useState(data);
  const [activeFilter, setActiveFilter] = useState("All");

  // Fetch and set the data.
  useEffect(() => {
    fetch("../data.json")
      .then((response) => response.json())
      .then((data) => setData(data))
      .catch((error) => console.error("error", error));
  }, []);

  // Filter the data
  useEffect(() => {
    if (activeFilter === "All") {
      setFilteredData(data);
    } else if (activeFilter === "Active") {
      setFilteredData(data.filter((item) => item.isActive === true));
    } else {
      setFilteredData(data.filter((item) => item.isActive === false));
    }
  }, [activeFilter, data]);

  return (
    <div className="w-full h-full bg-linear-to-b from-[#040918] to-[#091540] py-6 px-3 flex flex-col text-white">
      {/* Header */}
      <Header />

      {/* Options */}
      <Options activeFilter={activeFilter} setActiveFilter={setActiveFilter} />

      {/* Cards */}
      {filteredData &&
        filteredData.map((item) => (
          <Card
            logo={item.logo}
            name={item.name}
            description={item.description}
            isActive={item.isActive}
            key={item.name}
            setFilteredData={setFilteredData}
            filteredData={filteredData}
          />
        ))}
    </div>
  );
}

e aqui está Card.jsxcom a chave seletora:

const Card = ({
  logo,
  name,
  description,
  isActive,
  filteredData,
  setFilteredData,
}) => {
  const [activeState, setActiveState] = useState(isActive);

  function handleClick() {
    setActiveState(!activeState);
  }

  return (
    <div className="bg-neutral-700 p-4 rounded-xl border border-neutral-600 mt-4">
      <div className="flex items-start gap-4">
        {/* Logo */}
        <img src={logo} alt="Extension Image" />

        {/* Name and Description */}
        <div className="flex flex-col gap-2 mb-8">
          <h2 className="font-semibold text-xl">{name}</h2>
          <p className="text-sm font-light">{description}</p>
        </div>
      </div>

      {/* Remove Button */}
      <div className="flex justify-between items-center">
        <div className="border border-neutral-600 rounded-full px-3 py-1 flex items-center justify-center">
          <button>Remove</button>
        </div>

        {/* Is Active Toggle */}
        <div className="flex items-center justify-center">
          <label
            htmlFor={`${name}Toggle`}
            className="flex items-center cursor-pointer "
          >
            <div className="relative">
              <input
                id={`${name}Toggle`}
                type="checkbox"
                className="sr-only"
                onClick={handleClick}
              />
              <div
                className={`flex items-center ${
                  activeState ? "bg-red-400 " : "bg-gray-600 "
                } w-11 h-6 rounded-full transition-all px-[2px]`}
              >
                <div
                  className={`bg-white w-5 h-5 rounded-full ${
                    activeState ? "translate-x-5" : "translate-x-0"
                  } transition-all`}
                ></div>
              </div>
            </div>
          </label>
        </div>
      </div>
    </div>
  );
};

Eu estava tentando descobrir uma maneira dentro da handleclickfunção do Card que correspondesse ao nome do card específico com o nome do item filteredDatae... inverter o status dele isActive? Não consegui descobrir como fazer isso funcionar e nem tenho certeza se essa é a melhor maneira de fazer.

Estou tendo um problema estranho com o Tailwind e suas transições. Tenho uma div pai com uma cor de fundo que muda dependendo do estado ativo. Ela tem uma transição e funciona perfeitamente.

Dentro dessa div, tenho um "ponto" que alterna entre estar à esquerda e à direita, dependendo do seu estado ativo. A transição aqui não funciona.

Não sei por que a transição da segunda div não está funcionando. Tentei alterar o código para uma div absoluta, alternando entre esquerda-1 e direita-1, mas também não funcionou.

<div
  className={`flex items-center ${
    activeState ? "bg-red-400 " : "bg-gray-600 "
  } w-11 h-6 rounded-full transition-all px-[2px]`}
>
  <div
    className={`bg-white w-5 h-5 rounded-full ${
      activeState ? "ml-auto" : "mr-auto"
    } transition-all`}
  ></div>
</div>

Então é uma coisa de comentários de mídia social, com comentários de dois pais e comment#2dois comentários de filhos.

[
{
    "id": 1,
    "content": "Impressive! Though it seems the drag feature could be improved. But overall it looks incredible. You've nailed the design and the responsiveness at various breakpoints works really well.",
    "createdAt": "1 month ago",
    "score": 12,
    "user": {
        "image": {
            "png": "./images/avatars/image-amyrobson.png",
            "webp": "./images/avatars/image-amyrobson.webp"
        },
        "username": "amyrobson"
    },
    "replies": []
},
{
    "id": 2,
    "content": "Woah, your project looks awesome! How long have you been coding for? I'm still new, but think I want to dive into React as well soon. Perhaps you can give me an insight on where I can learn React? Thanks!",
    "createdAt": "2 weeks ago",
    "score": 5,
    "user": {
        "image": {
            "png": "./images/avatars/image-maxblagun.png",
            "webp": "./images/avatars/image-maxblagun.webp"
        },
        "username": "maxblagun"
    },
    "replies": [
        {
            "id": 3,
            "content": "If you're still new, I'd recommend focusing on the fundamentals of HTML, CSS, and JS before considering React. It's very tempting to jump ahead but lay a solid foundation first.",
            "createdAt": "1 week ago",
            "score": 4,
            "replyingTo": "maxblagun",
            "user": {
                "image": {
                    "png": "./images/avatars/image-ramsesmiron.png",
                    "webp": "./images/avatars/image-ramsesmiron.webp"
                },
                "username": "ramsesmiron"
            }
        },
        {
            "id": 4,
            "content": "I couldn't agree more with this. Everything moves so fast and it always seems like everyone knows the newest library/framework. But the fundamentals are what stay constant.",
            "createdAt": "2 days ago",
            "score": 2,
            "replyingTo": "ramsesmiron",
            "user": {
                "image": {
                    "png": "./images/avatars/image-juliusomo.png",
                    "webp": "./images/avatars/image-juliusomo.webp"
                },
                "username": "juliusomo"
            }
        }
    ]
}

]

Estou tentando descobrir como excluir um comentário filho e retornar a matriz na mesma configuração pai>filho .

No momento, ao clicar no botão excluir em um comentário, executo uma função que percorre os comentários principais para filtrar qualquer comentário principal que corresponda ao ID do comentário que foi clicado

    let filteredComments = [];

function handleClick(e) {
    setLoading(true);
    for (let i = 0; i < comments.length; i++) {
        if (comments[i].id !== Number(e.target.id)) {
            filteredComments = [...filteredComments, comments[i]];
        }
    }

    console.log(filteredComments);
    // setComments(...comments, filteredComments);
    setTimeout(() => {
        setLoading(false);
    }, 1000);
}

E isso retorna um array idêntico aos comentários data.json originais acima. O comentário que estou tentando excluir é id4 e é um comentário filho. Eu tentei uma dúzia de maneiras diferentes de percorrer os comentários filhos, mas não consigo descobrir como retornar apenas comentários filhos que não correspondem ao ID do comentário selecionado e retornar o objeto da mesma maneira parent>child(em um ponto eu consegui para retornar uma matriz com o comentário filho ao lado dos comentários pai, o que atrapalharia o mapeamento dos comentários para a página).

A última coisa que tentei foi percorrer os comentários principais, enviá-los para a matriz filtrada e, em seguida, percorrer os comentários filhos de quaisquer comentários dentro da matriz filtrada.

    let filteredComments = [];

function handleClick(e) {
    setLoading(true);
    for (let i = 0; i < comments.length; i++) {
        if (comments[i].id !== Number(e.target.id)) {
            filteredComments = [...filteredComments, comments[i]];
        }
    }


    if (comments[i].replies.length !== 0) {
        for (let k = 0; k < comments[i].replies.length; k++) {
            if (comments[i].replies[k].id !== Number(e.target.id)) {
                filteredComments = [
                    ...filteredComments,
                    comments[i].replies[k],
                ];
            }
        }
    }

    console.log(filteredComments);
    // setComments(...comments, filteredComments);
    setTimeout(() => {
        setLoading(false);
    }, 1000);
}

Posso adicionar com êxito o valor e o estado verificado de uma entrada a uma matriz de estado; portanto, quando clico em uma entrada, o valor e o estado verificado são enviados para a matriz e, quando clico novamente, o valor e o estado verificado de essa entrada específica é retirada da matriz.

O que estou travando é se eu for para a próxima etapa/componente e depois voltar, estou tentando definir minha entrada para o estado verificado com base no fato de já estar ou não na matriz de estado.

Existem três entradas, o padrão é desmarcado. Clicarei em #1 e #3, apertarei o próximo botão, irei para a próxima etapa, apertarei o botão Voltar, agora todas as três entradas estão desmarcadas novamente, embora o estado ainda tenha #1 e #3. Gostaria que os números 1 e 3 aparecessem como marcados.

const [addon, setAddon] = useState([]); //This is in another file

function AddOns({ addon, setAddon }) {
    const checkHandler = (e) => {
        if (e.target.checked === true) {
            setAddon([
                ...addon,
                { value: e.target.value, checked: e.target.checked },
            ]);
        }

        if (e.target.checked === false) {
            const nextAddon = addon.filter((a) => a.value !== e.target.value);
            setAddon(nextAddon);
        }
    };
                <Input
                    value="Online service"
                    dataAmount="+$1/mo"
                    dataNumber="1"
                    // checked={}
                    addonDetail="Access to multiplayer games"
                    onClick={(e) => checkHandler(e)}
                />
                {/* <!-- Add on --> */}
                <Input
                    value="Larger storage"
                    dataAmount="+$2/mo"
                    dataNumber="2"
                    // checked={}
                    addonDetail="Extra 1TB of cloud save"
                    onClick={(e) => checkHandler(e)}
                />
                {/* <!-- Add on --> */}
                <Input
                    value="Customizable profile"
                    dataAmount="+$2/mo"
                    dataNumber="2"
                    // checked={}
                    addonDetail=" Custome theme on your profile"
                    onClick={(e) => checkHandler(e)}
                />

Pensei que talvez percorrer a matriz de estado para combinar um valor da matriz com o valor de entrada e extrair o estado verificado se correspondesse poderia funcionar, mas não tive sucesso nisso. Também consegui definir o atributo verificado como se houver um estado verificado como verdadeiro na matriz de estado, mas isso definiria todas as três entradas como verificadas em vez da entrada específica.

Estou enviando dados do filho 1 para o pai e depois para o filho 2. No momento, há três coisas que preciso enviar; valores para dia, mês e ano. Obter apenas um valor funciona bem, mas quando tento obter todos os três, recebo um TypeError.

Pai:

import Results from "./Results";
import TopForm from "./TopForm";
import { useState } from "react";

function Hero() {
    const [dayValue, setDayValue] = useState("--");
    const [monthValue, setMonthValue] = useState("--");
    const [yearValue, setYearValue] = useState("--");

    return (
        <div className="font-poppins bg-light-grey p-2 h-screen w-screen">
            {/* Main Container */}
            <div className="container bg-white mt-16 max-w-[95%] md:max-w-2xl mx-auto p-10 rounded-xl rounded-br-3xl">
                <TopForm
                    // This does not work, Uncaught TypeError: callback is not a function
                    // callback={[setDayValue, setMonthValue, setYearValue]}

                    // This does work but only gets the dayValue
                    callback={setDayValue}
                />
                <Results
                    dayValue={dayValue}
                    monthValue={monthValue}
                    yearValue={yearValue}
                />
            </div>
        </div>
);
}

export default Hero;

Filho 1 (TopForm para obter os dados)

import { useState } from "react";

function TopForm({ callback }) {
const [error, setError] = useState(false);

const [dayText, setDayText] = useState("");
const [monthText, setMonthText] = useState("");
const [yearText, setYearText] = useState("");

const handleSubmit = (event) => {
    event.preventDefault();

    setDayText("");
    setMonthText("");
    setYearText("");
};

return (
    // Inputs Container
    <form onSubmit={handleSubmit}>
        {/* Upper Form */}
        <div className="container flex justify-center gap-4 md:max-w-lg">
            <div className="container w-1/3 flex flex-col">
                <label
                    htmlFor="day"
                    className={`if ${error} ? "text-red-400 text-sm mb-1 uppercase tracking-wide" : "text-smokey-grey"`}
                    id="day-label"
                >
                    Day
                </label>
                <input
                    type="number"
                    name="day"
                    id="day"
                    required
                    className="border-solid border-2 border-light-grey rounded-md p-3 text-lg outline-none focus:border-purple"
                    onChange={(event) => setDayText(event.target.value)}
                    value={dayText}
                />
                <div
                    id="day-error"
                    className="hidden text-xs text-red-400 mt-2"
                >
                    Must be a valid date
                </div>
            </div>

            <div className="container w-1/3 flex flex-col">
                <label
                    htmlFor="month"
                    id="month-label"
                    className="text-smokey-grey text-sm mb-1 uppercase tracking-wide"
                >
                    Month
                </label>
                <input
                    type="number"
                    name="month"
                    id="month"
                    required
                    className="border-solid border-2 border-light-grey rounded-md p-3 text-lg outline-none focus:border-purple"
                    onChange={(event) => setMonthText(event.target.value)}
                    value={monthText}
                />
                <div
                    id="month-error"
                    className="hidden text-xs text-red-400 mt-2"
                >
                    Must be a valid date
                </div>
            </div>

            <div className="container w-1/3 flex flex-col">
                <label
                    htmlFor="year"
                    id="year-label"
                    className="text-smokey-grey text-sm mb-1 uppercase tracking-wide"
                >
                    Year
                </label>
                <input
                    type="number"
                    name="year"
                    id="year"
                    required
                    className="border-solid border-2 border-light-grey rounded-md p-3 text-lg outline-none focus:border-purple"
                    onChange={(event) => setYearText(event.target.value)}
                    value={yearText}
                />
                <div
                    id="year-error"
                    className="hidden text-xs text-red-400 mt-2"
                >
                    Must be a valid date
                </div>
            </div>
        </div>

        {/* Line Arrow Container */}
        <div className="container my-20 flex justify-center relative">
            <hr className="border-light-grey w-full" />
            <button
                id="button"
                className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-purple w-16 h-16 rounded-full flex items-center justify-center hover:scale-125 transition-all"
                type="submit"
                onClick={() => callback(dayText, monthText, yearText)}
            >
                <img
                    src="/images/icon-arrow.svg"
                    alt="arrow"
                    className="w-6"
                />
            </button>
        </div>
    </form>
);
}

export default TopForm;

Filho 2 (Resultados, mostra os dados coletados do TopForm)

function Results({ dayValue, monthValue, yearValue }) {


return (
    // Results Container
    <div id="results-container" className="container">
        {/* Individual Container */}
        <div className="container flex">
            <span
                id="results-year"
                className="text-5xl italic font-bold text-purple mr-2"
            >
                {yearValue}
            </span>
            <p className="text-5xl italic font-bold mr-2">years</p>
        </div>

        <div className="container flex">
            <span
                id="results-month"
                className="text-5xl italic font-bold text-purple mr-2"
            >
                {monthValue}
            </span>
            <p className="text-5xl italic font-bold mr-2">months</p>
        </div>

        <div className="container flex">
            <span
                id="results-day"
                className="text-5xl italic font-bold text-purple mr-2"
            >
                {dayValue}
            </span>
            <p className="text-5xl italic font-bold mr-2">days</p>
        </div>
    </div>
);
}

export default Results;

Continuo recebendo este erro: TypeError não capturado: não é possível definir propriedades de nulo (definindo 'innerHTML')

ou: TypeError não capturado: não é possível definir propriedades de nulo (definindo 'textContent')

Ao tentar alterar o texto de uma tag âncora após a abertura de um modal.

Aqui está o modal:

 <!-- Success Modal -->
    <div class="modal-container" id="modal">
        <div class="modal-main">
            <img
                src="./assets/images/icon-success.svg"
                alt="success image"
            />
            <h1 class="modal-header">Thanks for subscribing!</h1>
            <p>
                A confirmation email has been sent to
                <a href="#" id="modal-email">test</a>. Please open it and
                click the button inside to confirm your subscription.
               
            </p>
        </div>
        <button id="dismiss-btn">Dismiss message</button>
    </div>

A forma:

   <form id="form">
            <label for="email">Email address</label>
            <input
                type="email"
                name="email"
                id="email"
                placeholder="[email protected]"
            />
            <button id="button">Subscribe to monthly newsletter</button>
        </form>

e o Javascript:

const form = document.getElementById("form");
const btn = document.getElementById("button");
const dismissBtn = document.getElementById("dismiss-btn");
const modal = document.getElementById("modal");
const modelEmail = document.getElementById("model-email");

form.addEventListener("submit", function (e) {
    e.preventDefault();
    modal.style.display = "block";

    let formData = new FormData(this);
    let inputValue = formData.get("email");

    console.log(inputValue);
    modelEmail.textContent = "example";
});

dismissBtn.onclick = function () {
    modal.style.display = "none";
};

O valor correto aparece no console ao registrar o inputValue no console, mas continuo recebendo erros ao tentar alterar o textContent da tag âncora no modal. Quer eu use inputValue ou [neste caso] a string de "exemplo", continuo recebendo o erro nulo.