Мне нужно из компонента PostForm передать переменную в компонент CardList. Я смотрел варианты, где сначало передают эту переменную в главный компонент, а потом уже из главного компонента передают в тот который нужен. Есть варианты как передавать пропсы между компонентами? Если не ошибаюсь это называется Child to Child. Так же я мог в компоненте CardList вставить компонент PostForm с небольшими доработками и тогда это работало, но если я захочу где-то опять использовать CardList, то вместе с постами появиться и PostForm, а мне это не надо.
PostForm.jsx
import React, { useState } from 'react';
function PostForm() {
let [name,setname] = useState('')
function add(){
const post = {
id: Date.now(),
name: name
}
console.log(post)
}
return (
<>
<input onChange={e=>setname(e.target.value)} placeholder='Name'/>
<button onClick={()=>add()}>Add</button>
</>
);
}
export default PostForm;
CardList.jsx
import React, { useState } from "react";
import Card from "./Card";
function CardList(){
function addPost(element){
//Новый элемент
console.log(element)
}
let [cards,setcards] = useState([
{id:0,name:"House 0"},
{id:1,name:"House 1"},
{id:2,name:"House 2"},
{id:3,name:"House 3"},
])
return (
<>
<div>
{cards.map(e=><Card post={e}/>)}
</div>
</>
)
}
export default CardList
useContext
PostForm
иCardList
? У них есть некий общий родитель?