title: Problem to map a new array and attach it to a already existing card in React
body: <p>I'm trying to map an array with React to attach an already fetched API card, but when i do it on my card appears all the array values and not 1 for each card like the API fetched data. Here some code and images. <a href="https://i.stack.imgur.com/ynMor.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ynMor.png" alt="enter image description here" /></a></p>
  <p>And here is some code!</p>
  <p>This first is the Context API!</p>
  <pre><code>import { createContext, useState, useEffect } from 'react'
  
  
  export const ApiContext = createContext()
  
  export function ApiContextProvider({ children }) {
      const [cardMovies, setCardMovies] = useState([])
      const [genres, setGenres] = useState([])
      const [alert, setAlert] = useState(false)
      const prices = [13, 22, 15, 8, 3, 18, 31, 20, 14, 4, 2, 16, 34, 5, 10, 29, 38, 17, 25, 6]
      
      
  
      const API_URL =
          'https://api.themoviedb.org/3/discover/movie?sort_by=popularity.desc&amp;api_key=3fd2be6f0c70a2a598f084ddfb75487c&amp;page=1'
      const SEARCH_API =
          'https://api.themoviedb.org/3/search/movie?api_key=3fd2be6f0c70a2a598f084ddfb75487c&amp;query=&quot;'
  
      const API_GENRES =
          'https://api.themoviedb.org/3/genre/movie/list?api_key=93d7b02037671a1fa467ef1718012062&amp;language=en-US'
  
      useEffect(() =&gt; {
          fetch(API_URL)
              .then((res) =&gt; res.json())
              .then((data) =&gt; {
                  setCardMovies(data.results)
              })
  
          fetch(API_GENRES)
              .then((genre) =&gt; genre.json())
              .then((result) =&gt; {
                  const genres = result.genres.reduce((genres, gen) =&gt; {
                      const { id, name } = gen
                      genres[id] = name
                      return genres
                  }, [])
                  setGenres(genres)
              })
                  
      }, [])
  
      const SearchMovies = (e) =&gt; {
          e.preventDefault()
  
          fetch(SEARCH_API + e.target.elements.filme.value)
              .then((res) =&gt; res.json())
              .then((data) =&gt; {
                  setCardMovies(data.results)
              })
  
          e.target.elements.filme.value = ''
      }
  
      const addToCart = () =&gt; {
          setAlert(true)
  
          setTimeout(() =&gt; {
              setAlert(false)
          }, 3000)
      }
  
     
  
      return (
          &lt;ApiContext.Provider
              value={{ cardMovies, genres, SearchMovies, addToCart, alert, prices }}
          &gt;
              {children}
          &lt;/ApiContext.Provider&gt;
      )
  }
  </code></pre>
  <p>This is my Container with the Cards map</p>
  <pre><code>import React, { useContext } from 'react'
  import { ApiContext } from '../contexts/ApiContext'
  import styled from 'styled-components'
  import Card from './Card'
  import Alert from './Alert'
  
  export default function Content() {
      const { cardMovies, alert} = useContext(ApiContext)
  
      
        
      return (
          &lt;Container&gt;
              {alert &amp;&amp; &lt;Alert /&gt;}
              {cardMovies.map((movie) =&gt; {
                  return &lt;Card key={movie.id} {...movie} /&gt;
              })
          }
              
          &lt;/Container&gt;
      )
  }
  </code></pre>
  <p>This is the each card content, i'm having problem here to solve it.</p>
  <pre><code>import { useState, useContext } from 'react'
  import { ApiContext } from '../contexts/ApiContext'
  import { FaHeart, FaStar } from 'react-icons/fa'
  import styled from 'styled-components'
  
  export default function Card({
      title,
      release_date,
      vote_average,
      poster_path,
      genre_ids,
      id
  }) {
      const { genres, addToCart, prices } = useContext(ApiContext)
      const [like, setLike] = useState(false)
  
      return (
          &lt;CardDiv&gt;
              &lt;Like
                  like={like}
                  onClick={() =&gt;
                      like === false ? setLike(true) : setLike(false)
                  }
              /&gt;
              &lt;Image
                  src={'https://image.tmdb.org/t/p/w1280/' + poster_path}
                  alt={title}
              /&gt;
              &lt;Date&gt;{release_date}&lt;/Date&gt;
              &lt;MovieTitle&gt;{title}&lt;/MovieTitle&gt;
              &lt;Info&gt;
                  &lt;Star /&gt; {vote_average} - {' '}
                  {genre_ids
                      .map((id) =&gt; {
                          return &lt;Info&gt;{genres[id]}&lt;/Info&gt;
                      })
                      .slice(0, 1)}
              &lt;/Info&gt;
              
              {prices.map((price) =&gt; {
                return (
                  &lt;Info&gt;{`R$ ${price},99`}&lt;/Info&gt;
                )
              })}
              &lt;Button onClick={addToCart}&gt;Adicionar&lt;/Button&gt;
          &lt;/CardDiv&gt;
      )
  }
  </code></pre>