React - append element to DOM by leveraging the use of state object

Question

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

export class MainComponent extends React.Component {
  constructor(props) {
    this.greet = this.greet.bind(this);
    this.state = {
      text: [],
    };
  }

  greet(value) {
    //console.log(value);

    const {text} = this.state
    return this.setState({
      text: text.concat(value),
    });

  }

  render() {
    return (
      <div>
        <Child onGreet={this.greet} />
        <ul>
        {this.state.text.map(x => (<li>{x}</li>))}
        </ul>
      </div>
    )
  }
};