How to fix Objects are not valid as a React child error?

Question

JavaScript

Hello, I started learning React and met an error.
Error :
index.js

import React from 'react';
import ReactDOM from 'react-dom';

import Actions from './components/actions';

const App = () => {

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

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

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

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

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

  ];

  return (
    <div id="calculator">
      <div id="value">
        <span id="input">25 + 25,6 +40 + 10 +</span>
        <span id="output">100,6</span>
      </div>
      <Actions actions = { actions }/>
    </div>
  );
};

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

actions.js

import React from 'react';

import Action from './actions-item';

const Actions = ({ actions }) => {

  const actionList = actions.map((action) => {
    return <Action label = { action.label } className = { action.className } id = { action.id }/>;
  }); 

  return { actionList };
};

export default Actions;

actions-item.js

import React from 'react';

const Action = ({ label, className, id = ''}) => {
  return <button className = { className } id = { id }>{ label }</button>;
};

export default Action;

As I understand it, React does not render a property of an object, but the object itself. I can't figure out where the error is.

Answer 1

Replace
with
return actionList;