How to send data to parent?

Question

JavaScript

Hello, I started to learn React and I don't know how to pass data to the parent component.
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>
    );
  }
}

How to pass its label to the Value component when clicking on the button. I know that I need to pass from the bottom up, but I don't know how. If possible, please explain how to correctly pass data between components. Thanks in advance.

Answer 1

https://reactjs.org/docs/lifting-state-up.html