2г

Создание нового пункта в react

Не получается создать, не понимаю как связывать компоненты и передавать информацию между ними.
App.js:

12345

 <div className="App"> 
   <Header/> 
   <Input/> 
   <List/> 
</div>

List.jsx, не знаю как привязать функцию не вызывая ее.

123456789101112

 const List = () => { 
    function addNewPost(text) { 
        savedList.push(text) 
    } 
    let savedList = [ 
        {text: 'value123'}, 
        {text: 'value321'}, 
    ] 
    return ( 
        savedList.map((element, i) => {return <ListItem onClick={addNewPost} text={element.text} />}) 
    ) 
}

ListItem.jsx:

12345678

 const ListItem = (props, onClick) => { 
    return ( 
        <div className="list-item"> 
            <h3>{props.text}</h3> 
            <button onClick={onClick} className="remove">Remove</button> 
        </div> 
    ); 
}

Заранее спасибо!

По дате

По рейтингу

matz

Просветленный

2г

Судя по коду ты вообще не догоняешь как работает React и ванильный JS тоже не особо
... Понятие "состояние" или state тебе ни о чем не говорит? Откуда ты возьмешь данные для создания новой позиции в массиве savedList? Может для этого всё-таки форма с полями ввода нужна? "onClick" это зарезервированное название функции эвента и её нельзя передавать как пропс. Вобщем у тебя тотальное непонимание базовых понятий, рекомендую пройти курс для новичков сначала... И лучше сначала попрактиковаться в чистом JS, а потом уже за React браться...