Как передавать данные родителю?

Question

Артур Кудашев @archi_kud

Frontend Developer

React

Как передавать данные родителю?

Здравствуйте, начал изучать React и не знаю как передать данные в родительский компонент.

index.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

import Actions from './components/actions';
import Value from './components/value';
import './style.css';

class App extends Component {

	render() {

		const actions = [
			{ label: '%', className: 'action white-button' },
			{ label: '+', className: 'action white-button' },
			{ label: 'C', className: 'action white-button' },
			{ label: '/', className: 'action purple-button' },

			{ label: '7', className: 'action white-button' },
			{ label: '8', className: 'action white-button' },
			{ label: '9', className: 'action white-button' },
			{ label: 'x', className: 'action purple-button' },

			{ label: '4', className: 'action white-button' },
			{ label: '5', className: 'action white-button' },
			{ label: '6', className: 'action white-button' },
			{ label: '-', className: 'action purple-button' },

			{ label: '1', className: 'action white-button' },
			{ label: '2', className: 'action white-button' },
			{ label: '3', className: 'action white-button' },
			{ label: '+', className: 'action purple-button' },

			{ label: '0', className: 'action white-button' },
			{ label: ',', className: 'action white-button' },
			{ label: '=', className: 'action', id: 'equally' }
		];

		return (
			<div id='calculator'>
				<Value value = '10'/>
				<Actions actions = { actions }/>
			</div>
		);
	}
}

ReactDOM.render(<App />, document.getElementById('main-wrap'));

actions.js

import React, { Component } from 'react';

import Action from './actions-item';

export default class Actions extends Component {
	
	render() {
		const { actions } = this.props;
		const actionList = actions.map((action) => {
			return <Action label = { action.label } className = { action.className } id = { action.id }/>;
		}); 

		return (
			<div id = 'actions'>
				{ actionList }
			</div>
		);
	}
}

actions-item.js

import React, { Component } from 'react';

export default class Action extends Component {

	addValue = () => {
		return this.props.label;
	}

	render() {
		const { label, className, id = ''} = this.props;

		return <button onClick = { this.addValue } className = { className } id = { id }>{ label }</button>;
	}
}

value.js

import React, { Component } from 'react';

export default class Value extends Component {

	render() {
		const { value } = this.props;

		return (
			<div id='value'>
				<span id='input'></span>
				<span id='output'>{ value }</span>
			</div>
		);
	}
}

Как при клике на кнопку передать ее label в компонент Value. Знаю, что нужно передавать снизу вверх, но не знаю как. Если можно, то объясните как правильно передавать данные между компонентами. Заранее спасибо.