Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6287

How to map an API with Typescript in ReactJS?

$
0
0

I'm new to Typescript and I have to get a list of books from an API. My profesor gave me the code in javascript to do this, but I have to do this in typescript and react native.

Getting api:

import axios from 'axios';const api = axios.create({    baseURL: "https://hn.algolia.com/api/v1"});export default api;

List component:

import React, { Component } from "react";import './List.css';class List extends Component {    constructor(props: any) {        super(props);        this.state = {};    }    render() {        const apiData = this.props;        return (<div className="List">                {apiData?.map(item => (<div className="Livro"><h3> {item.name}</h3><p> {item.authors.join(',')}</p><p><a href={item.url} target='_blank' rel="noreferrer"> {item.url}</a></p></div>                ))}</div>        );    }}export default List;

An example how I will call the List component:

import React, {Component} from 'react';import List from '../../components/list'import api from '../../_config/api';import './Welcome.css';class Welcome extends Component {  constructor(props){    super(props);    this.state = {sectionData:props.sectionData}    this.filterList = this.filterList.bind(this);    this.fetchData = this.fetchData.bind(this);  }  async fetchData(value) {    const response = await api.get('/books?name='+value)    this.setState({sectionData:response?.data})  }  async componentDidMount(){    this.fetchData('');  }  render() {     const {sectionData} = this.state;    return (<div className="Welcome"><List data={sectionData}/></div>      );  }}export default Welcome;

The part of the code that only works in Javascript:

return (<div className="List">                {apiData?.map(item => (  // error here<div className="Livro"><h3> {item.name}</h3><p> {item.authors.join(',')}</p><p><a href={item.url} target='_blank' rel="noreferrer"> {item.url}</a></p></div>                ))}</div>        );

I tried to do this the same way in typescript, but it return this error:

Type error: Property 'map' does not exist on type 'Readonly<{}> & Readonly<{ children?: ReactNode; }>'.

Is there any way to resolve this error or another way to map an API without using map()?


Viewing all articles
Browse latest Browse all 6287

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>