React 16：TypeError：this.state.userInput.map不是函数

Question

I have simple react app, which a user can enter a text input , I want to display character entered as list

here is what I have done so far:

    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;

Here is Char component

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;

so when I run the app I get the following error

TypeError: this.state.userInput.map is not a function

What do I need to change to get rid of this distubing litle error?

Answer 1

There is no map method for a string.

You can make it an array easily enough:

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