分隔添加到React状态的值

Question

我正在Web应用程序中从不同的用户那里获取多个值，目前在呈现getVotes和消息时，它们都以无分隔的方式显示。 React的新手，我该如何添加换行符？是在渲染或状态下完成的吗？如果您需要我的代码更多的上下文，请告诉我。感谢您的帮助！

 class App extends Component {
      state = {
        commissioner: '',
        members: [],
        getVotes: '',
        castedVotes: [],
        data: '',
        message: ''
      };

      async componentDidMount() {
        const commissioner = await fantasy.methods.commissioner().call();
        const members = await fantasy.methods.getMembers().call();
        const getVotes = await fantasy.methods.getVotes().call();

        this.setState({ commissioner, members, getVotes });
        this.setState({ number: this.value })
      }

    onSubmit = async (event) => {
      event.preventDefault();

      const accounts = await web3.eth.getAccounts();
      console.log(accounts)
      const data = await this.state.data

      this.setState({ message: 'waiting on vote to be secured on the blockchain'})

      await fantasy.methods.vote(data).send({
        from: accounts[0],
        gas: '3000000',
        value: web3.utils.toWei('0.10', 'ether'),
        data: this.state.data
      });

      this.setState({ message: 'your vote has been cast '});
    };

    onClick = async () => {

      const accounts = await web3.eth.getAccounts();
      const members = await this.state.members
      this.setState({ message: 'Reading the blockchain to see who has voted' });

      await fantasy.methods.getMembers().call({
        from: accounts[0]
      });

      this.setState({ message: members })

    };

    onCheck = async () => {
      const accounts = await web3.eth.getAccounts();
      const getVotes = this.state.getVotes;

      this.setState({ message: 'Getting the votes from the blockchain' });

      await fantasy.methods.getVotes().call({
        from: accounts[0]
      });

      this.setState({ message: getVotes });

    };

      render() {
        return (
          <div>
            <h2>How many teams should we have in our league?</h2>
            <p>The commisssioner managing this contract is {this.state.commissioner}.  
            There are currently {this.state.members.length} votes
            </p>

            <hr />

            <form onSubmit={this.onSubmit}>
              <h4>Cast your vote and be heard!</h4>
              <div>
                <label>Max Teams:</label>
                <input 
                  data={this.state.data}
                  onChange={event => this.setState({ data: event.target.value })}
                />

              </div>
              <button>VOTE</button>
              </form>

             <hr />

              <h4>Who has voted?</h4>
              <button onClick={this.onClick}>See Members</button>

              <hr />

              <h4>What are the votes?</h4>
              <button onClick={this.onCheck}>See Votes</button>



             <h1>{this.state.message}</h1>

          </div>
        );
      }