Взаимодействие компонентов в React

Есть форма (в ней input и button), есть div(компонент Posts) внизу нее, где должны отображаться элементы, которые будут добавляться при нажатии на кнопку.

Суть: написать текст, нажать кнопку - текст добавится в компонент posts.

export class Form extends Component {
    constructor(props){
        super(props);
        this.handleClick = this.handleClick.bind(this);
        this.handleChange = this.handleChange.bind(this);
        this.state = { text: "" };
    }
    handleChange(e) {
        this.setState({ text: e.target.value });
    }
    handleClick() {
        // при клике на кнопку нужно создать новый компонент post
        // отрендерить (а значит изменить state)
        // и добавить его в posts
    }
    render() {
        return (
        <div className="form">
            <input type="text" onChange={this.handleChange} />
            <button onClick={this.handleClick} >Add</button>
            </div>
        );
    }
}
export class Posts extends Component {
    render() {
        return(
        <div className="posts"></div>
        );
    }
}
export class Post extends Component {
    render() {
        return(
        <div className="post">{this.props.text}</div>
        );
    }
}
export class App extends Component {
    constructor(props) {
        super(props);
        this.state = { posts: [] };
    }
    render() {
        return(
        <div>
            <Form />
            <Posts />
        </div>
        );
    }
}

Как сделать взаимодействие компонентов? Чтобы при клике на кнопку добавлялся новый элемент-компонент post. Как понимаю это должно работать - при клике на кнопку я обновляю state в компоненте Form и изменяю state в App. Но подход, наверное, неверен, потому что полностью все компоненты будут заново рендериться. Значит, надо обновить лишь state в Form. Но как создать post-элемент и добавить в posts не знаю. Подскажите, пожалуйста.