Typeerror: this.props.user.map is not a Function - React Js

Question

Hello,

I’m training a little bit with the github api. I divided my component into a card (it has user information and etc) and in the view.

I’m doing the fetchData in the view and rendering on a different component. The idea is to make a map with the different component, but when I search for a new user in the api returns me an error.

And the "funny" is that this error only happens in the . map() method, if I take it out and leave the jsx fixed, it usually picks up.

this is my component that will receive user data

                {this.props.user.map((cardUser) => (
            <div id="info" key={cardUser.id}>
                <div id="img">
                    <img src={cardUser.avatar_url === undefined ? require('../assets/default.jpg') : `${cardUser.avatar_url}`} alt="profile pic" />
                </div>
                <div id="description">
                    <h3>{cardUser.username === undefined ? 'Search your user' : cardUser.username}</h3>
                    <div id="boxInfos">
                        <div className="apiInfos">
                            <h3>Seguidores</h3>
                            <h4>{cardUser.followers}</h4>
                        </div>
                        <div className="apiInfos">
                            <h3>Seguindo</h3>
                            <h4>{cardUser.following}</h4>
                        </div>
                        <div className="apiInfos">
                            <h3>Localização</h3>
                            <h4>{cardUser.location}</h4>
                        </div>
                    </div>
                </div>
                <div id="url">
                    <a href={cardUser.html_url === undefined ? '#' : cardUser.html_url} target={cardUser.html_url === undefined ? '' : '_blank'}>></a>
                </div>
                    <button onClick={() => this.props.toConcat(cardUser)}>Adicionar nova pesquisa</button>
            </div>   
            ))}

My progeny

 fetchData = () => {
const controller = new AbortController();
const signal = controller.signal
if(this.state.username === undefined || this.state.username === ''){
  this.setState({
    noInput: true,
    anyError: true,
  })
  controller.abort();
  return false;
}
const urlTofetch = `https://api.github.com/users/${this.state.username}`
fetch(urlTofetch)
.then(response => response.json())
.then(data => {this.setState({user: data})
  if(data.login === undefined){
    this.setState({noInput: false, anyError: true})
    controller.abort();
  }
  if(data.id === undefined){
    this.setState({anyError: true})
  }
})
.catch(err => {this.setState({anyError: true})});

}

My state

    this.state = {
  user: [{
    username: undefined,
    login: undefined,
    avatar_url: undefined,
    followers: undefined,
    following: undefined,
    location: undefined,
    html_url: undefined,
    id: undefined
  }],
  anyError: false,
  noInput: false,

}

Import of the Carduser component

                <CardUser user={this.state.user}  />

I’ll be very grateful to anyone who can help me