Dlaczego nie tworzy mi nowej kartki przed addcard

Question

Nie tworzy mi nowej karty z wartośćami  od użytkownika czy useEffect pomoże czy raczej źle myślę kod

addcard

import React, { useState, useRef } from "react";
import Card from "./Card";

var Cards = [];
export default function Addcard() {
	const [count, setCount] = useState(0);

	const parentReference = useRef([]);

	function AddCard() {
		const name = document.querySelector("#input-0").value;
		var props = [
			{
				Img: document.querySelector("#input-1").value,
				Rating: document.querySelector("#input-2").value,
				ReviewPost: document.querySelector("#input-3").value,
				Country: document.querySelector("#input-4").value,
				Title: document.querySelector("#input-5").value,
				Cost: document.querySelector("#input-6").value,
			},
		];

		Cards.push(<Card {...props} key={`@${name}`} />);
		console.log(Cards);
		setCount((count) => (count = 0));
	}

	function plus() {
		setCount((count) => (count = 1));
	}
	return (
		<div className="Card-container Card-container-add">
			{count === 0 ? (
				<div className="Card-arrows">
					<span className="arrow-n-e">&#8598; </span>
					<span className="arrow-n-w"> &#8599; </span>
					<button className="addcard-button" onClick={plus}>
						+
					</button>
					<span className="arrow-s-e">&#8600; </span>
					<span className="arrow-s-w"> &#8601;</span>
				</div>
			) : (
				<div>
					{Cards}
					<div className="Card-inputs">
						<input className="addcard-inputs" id="input-0" ref={parentReference} placeholder="Name"></input>
						<input className="addcard-inputs" id="input-1" ref={parentReference} placeholder="Image url"></input>
						<input className="addcard-inputs" id="input-2" ref={parentReference} placeholder="Rating"></input>
						<input className="addcard-inputs" id="input-3" ref={parentReference} placeholder="ReviewPost"></input>
						<input className="addcard-inputs" id="input-4" ref={parentReference} placeholder="Country"></input>
						<input className="addcard-inputs" id="input-5" ref={parentReference} placeholder="Title"></input>
						<input className="addcard-inputs" id="input-6" ref={parentReference} placeholder="Cost"></input>
						<input type="button" value="Save" onClick={AddCard} className="addcard-inputs-button"></input>
					</div>
				</div>
			)}
		</div>
	);
}

card 

import React, { useState } from "react";

export default function Card(props) {
	const [count, setCount] = useState(0);
	function increment() {
		setCount((count) => count + 1);
	}
	return (
		<div className="Card-container">
			<div className="card-button-img">
				<div className="card-button">
					{count >= 1 ? (
						<div>
							<input className="card-heart crimson-heart" type="button" value="❤️" onClick={increment}></input>
							<span className="card-counter">{count}</span>
						</div>
					) : (
						<input className="card-heart" type="button" value="" onClick={increment}></input>
					)}
				</div>

				<img src={require(`../img/cards/${props.Img}`)} className="card-img" alt="bitch" title="image from pexels.com"></img>
			</div>
			<div className="card-description"></div>
			<div className="card-stats">
				<span className="rating-star" title="Rating">
					&#9733;<span>{props.Rating}</span>
				</span>

				<span className="card-gray" title="Country">
					{props.Country}
				</span>
				<span className="card-gray" title="Count of reviews post">
					({props.ReviewPost})
				</span>
			</div>
			<p className="card-bold" title="Title">
				{props.Title}
			</p>
			<p title="Cost per person">
				<span className="card-bold">From ${props.Cost}</span> / person
			</p>
		</div>
	);
}

App

import React from "react";
//import Navbar from "./components/Navbar";
//import Main from "./components/Main";
import Card from "./components/Card";
//import Footer from "./components/Fotter";
import Addcard from "./components/AddCard";

export default function App() {
	return (
		<div>
//			<Navbar />
//			<Main />
			<Card Img="pexels-merve-şahin-11161043.jpg" Rating={4.9} ReviewPost={48} Country="France" Title="Life lessons with Katie Zaferes" Cost={150} />

			<Addcard />
//			<Footer />
		</div>
	);
}

 

Answer 1

Tworzy Ci ale nie renderuje się na nowo bo nie masz tego w state. Jeśli robisz coś co ma wpłynąć na render musi być w useState. Inaczej zmieniasz wartość ale React nie wie ze ma się renderować na nowo. No i źle to robisz powinieneś w tablicy zapisać tylko obiekt z propsami a w JSX dorpiero tworzyć komponenty.

PS. Przeczytaj chociaż raz na spokojnie całą dokumentacje Reacta nie jest tego dużo a powinno Ci pomóc z większością problemów.