Olá, estou estudando React JS tentando fazer uma aplicação com a API do CEP. Entretanto, vi que o JSON do mesmo é um objeto e não possui um array, logo, não estou conseguindo realizar o map (está dando "...map is not a function") para imprimir as informações no navegador.
{
"cep": "20260-080",
"logradouro": "Rua Joaquim Palhares",
"complemento": "até 392/393",
"bairro": "Estácio",
"localidade": "Rio de Janeiro",
"uf": "RJ",
"unidade": "",
"ibge": "3304557",
"gia": ""
}
Eu tentei resolver com um Array.from() antes do map e um JSON.parse() no fetch, mas sem sucesso.
class App extends Component {
constructor(props) {
super(props)
this.state = {
result: null,
searchTerm: '',
}
this.onSearchChange = this.onSearchChange.bind(this)
this.onSearchSubmit = this.onSearchSubmit.bind(this)
}
fetchSearchTopStories(searchTerm) {
fetch(`https://viacep.com.br/ws/${searchTerm}/json/`)
.then(res => res.json())
.then(result => this.setState({result}))
.catch(err => err);
}
onSearchChange(e) {
this.setState({ searchTerm: e.target.value });
}
onSearchSubmit(e) {
const { searchTerm } = this.state;
this.fetchSearchTopStories(searchTerm)
e.preventDefault()
}
componentDidMount(){
const { searchTerm } = this.state;
this.fetchSearchTopStories(searchTerm)
}
render(){
const {result, searchTerm} = this.state
return (
<>
<form onSubmit={this.onSearchSubmit}>
<input type='text' value={searchTerm} onChange={this.onSearchChange}/>
<button type='submit'>Clique</button>
</form>
{result?
<div>
{result.map((item, index) =>
<span key={index}>
<p>{item.logradouro}</p>
<p>{item.bairro}</p>
<p>{item.localidade}</p>
</span>
)}
</div>
:null}
</>
);
}
}
Ficaria muito grato com alguma ajuda para resolver esse problema.