Fetch data and add to variable-CodePudding

Hello I'm working with my project and I want to fetch poster_patch into variable to print every single image of miniatures in my app. Im working with react-native in. Here is some code of my app. I want to create function to fetch value of path_poster and add it after to uri

Top.js `

import React,{useState,useEffect} from "react";
import { View, StyleSheet, Text } from "react-native";
import MovieBox from './MovieBox';
const API_URL="https://api.themoviedb.org/3/movie/top_rated?api_key=xxx"
export default function Top(){
    const [movies,setMovies]=useState([]);
    useEffect(()=>{
        fetch(API_URL)
        .then((res)=>res.json())
        .then(data =>{
            console.log(data);
            setMovies(data.results);
        })

     }, [])
  return (

    movies.map((movieReq)=><MovieBox key ={movieReq.id} {...movieReq}/>)

  );
};

MovieBox.js

import React from 'react';
import { View, StyleSheet, Text,Image } from "react-native";
const API_IMG = "https://image.tmdb.org/t/p/w500";

function MovieBox ({title, poster_patch,vote_average,release_date,overview}){
const styles = StyleSheet.create({
  container: {
    paddingTop: 50,
  },
  tinyLogo: {
    width: 50,
    height: 50,
  },
  logo: {
    width: 66,
    height: 58,
  },
});
    return(
    <View>
    <Text>
        {title} rated:
        {vote_average}

    </Text>
    <Image source={{
            uri: API_IMG   HERE I WANT TO ADD VARIABLE TO POSTER_PATCH,
            }}
            style={styles.tinyLogo}
            />
    </View>
 )
}
export default MovieBox;

How to get values from poster_path and add it into uri

CodePudding user response：

Join base url and path for example using concat.

<Image source={{
    uri: API_IMG.concat(poster_path),
  }}
  style={styles.tinyLogo}
/>

See Images for details.