0

Мне нужно из компонента 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
3
  • Думаю, для таких целей вам лучше использовать useContext
    – SwaD
    14 июл в 11:56
  • Хорошо, попробую. Спасибо за ответ
    – Venom
    14 июл в 12:03
  • Как вообще связаны элементы PostForm и CardList? У них есть некий общий родитель?
    – ksa
    14 июл в 20:22

1 ответ 1

1

Как передать props из одного компонента в другой компонент?

Прокидывать пропсы можно только в дочерние элементы...

Твою проблему можно решить "поднятием" стейта в родительский элемент.

//
function App() {
    const [cards, setcards] = React.useState([
        {id:0,name:"House 0"},
        {id:1,name:"House 1"},
        {id:2,name:"House 2"},
        {id:3,name:"House 3"},
    ])
    return <div>
       <PostForm act={setcards} />
       <CardList cards={cards} />
    </div>
}
//
function CardList({cards}) {
    return <ul>
       {cards.map(o => <li key={o.id}>{o.name}</li>)}
    </ul>  
}
//
function PostForm({act}) {
    let [name, setname] = React.useState('')
    function add(){
        const post = {
            id: Date.now(),
            name: name
        }
        act(old => [...old, post])
    }
    return <div>
        <input onChange={e => setname(e.target.value)} placeholder='Name'/>
        <button onClick={add}>Add</button>
    </div>
}

const domContainer = document.querySelector('#like_button_container');
const root = ReactDOM.createRoot(domContainer);
root.render(<App />);
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<div id="like_button_container"></div>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.