Estou com esse erro. " TypeError: this.state.arrayCep.map is not a function " , e não sei como resolver.
import React from 'react';
import './App.css';
import styled from 'styled-components';
import axios from 'axios';
import ItemCEP from './components/ItemCEP/index'
const baseURL= "https://viacep.com.br/ws/";
const Container = styled.div`
/* display:flex;
justify-content:column; */
`
const Input = styled.input`
border: solid 2px green;
width:250px;
`
const Botao = styled.button`
border: none;
background-color: black;
width:150px;
height:30px;
color:white;
display: block;
margin:10px auto;
`
class App extends React.Component {
constructor(props){
super(props)
this.state={
cep:"",
arrayCep: [],
}
}
onChangeCep = (e) =>{
this.setState({cep: e.target.value})
}
pegarCep = () =>{
const request = axios.get(
`${baseURL}${this.state.cep}/json/`
)
request.then(response => {
this.setState({arrayCep: response.data})
})
}
render(){
console.log(this.state.arrayCep)
return (
<div className="App">
<h3>Digite um CEP</h3>
<Input type="number" value={this.state.cep} onChange={this.onChangeCep}></Input>
<Botao onClick={this.pegarCep}>Consultar CEP</Botao>
<hr></hr>
{this.state.arrayCep.map(cep =>(
<ItemCEP cep={cep}></ItemCEP>
))}
</div>
);
}
}
export default App;
import React from 'react';
import axios from 'axios';
import Styled from 'styled-components';
function ItemCEP (props){
console.log("item cep", props.cep)
return(
<div>
<p>{props.cep.logradouro}</p>
</div>
)
}
export default ItemCEP;
É ISSO QUE É IMPRESSO NO LOG.
Object
cep: "08440-000"
logradouro: "Rua Porto do Bezerra"
complemento: ""
bairro: "Jardim Guaianazes"
localidade: "São Paulo"
uf: "SP"
unidade: ""
ibge: "3550308"
gia: "1004"
__proto__: Object