Реакция 16: TypeError: this.state.userInput.map не является функцией

Question

У меня есть приложение простого реагирования, в которое пользователь может ввести текстовый ввод. Я хочу отобразить введенный символ в виде списка

. Вот что я сделал до сих пор:

    app components 
    import React, { Component } from 'react';
    import './App.css';
    import Char from './Char/Char'


    class App extends Component {
      state ={
        userInput: ''
      }

      handleChange =(e)=>{
this.setState({
  userInput: e.target.value
})
      render() {

        const charList = this.state.userInput.map(char =>{
          return (
            <Char character={char} />
          )
        })

        return (
          <div className="container">
          <div className="App card">
    <input type="text" placeholder="enter a text" 
      value={this.state.userInput} onChange={this.handleChange}></input>
      <p>Paragraph: {this.state.userInput}</p>

          {charList}

          </div>
        </div>
        );
      }
    }

    export default App;

Вот компонент Char

import React from 'react'

const Char =(props) =>{

        const divStyle = {
            display: 'inline-block',
            margin: '16px',
            border: '1px solid pink',
            padding: '16px', 
            textAlign: 'center',
            backgroundColor: 'orange'

          };
        return ( 
            <div style={divStyle}>
           <p>{props.character}</p>
            </div>
         );
}

export default Char;

, поэтому при запуске приложения появляется следующая ошибка

TypeError: this.state.userInput.map не является функцией

Что мне нужно изменить, чтобы избавиться от этой небольшой ошибки?

Answer 1

Не существует метода map для строки.

Вы можете сделать его массивом достаточно легко:

this.state.userInput.split('').map(c => <Char character={c} />);