title: how to remove picture from data using api in react
body: <p>so i am trying to learn api and doing this cool project. so what i have is that i got photos data from this api website:<a href="https://jsonplaceholder.typicode.com/" rel="nofollow noreferrer">https://jsonplaceholder.typicode.com/</a></p>
  
  <p>so basically i have a buttom that will add thumbnail data from api based on the albumId in the posts section and when i press on the image it will send the url of the image to a function which will load it on top. </p>
  
  <p>so what i want is to be able to remove the picture up top to have like this red x next to it and when i press it it will be deleted from the upper section and also from the posts section.</p>
  
  <p>my code so far:</p>
  
  <pre><code>const DataFetching = () =&gt;{
  
      const [photo,setPhoto] = useState([])
      const[albumId,setAlbumId] = useState(1)
      const[albumIdFromButtonClick,setAlbumAIdFromButtonClick] = useState(1)
  
      useEffect(()=&gt;{
          axios.get(`https://jsonplaceholder.typicode.com/photos?albumId=${albumIdFromButtonClick}`)
          .then(res =&gt;{
              console.log(res)
              setPhoto(res.data)
          })
          .catch(err =&gt;{
              console.log(err)
          })
      },[albumIdFromButtonClick])
  
      const handleClick = () =&gt; {
          setAlbumAIdFromButtonClick(albumId)
      }
  
      const [Url,setUrl] = useState()
  
      const showPicture = (url) =&gt; {
          setUrl(url)
      }
  
      return(
          &lt;div&gt;
              &lt;div&gt;&lt;img src={Url}&gt;&lt;/img&gt;&lt;/div&gt;
              &lt;div&gt;Posts&lt;/div&gt;
              &lt;p&gt;enter album Id to see the magic&lt;/p&gt;&lt;input type="text" value={albumId} onChange={e =&gt; setAlbumId(e.target.value)}&gt;&lt;/input&gt;
              &lt;button type="button" onClick={handleClick}&gt;Fetch Album&lt;/button&gt;
              &lt;div className="container"&gt;
              &lt;div&gt;{photo.map(p =&gt; 
                  &lt;div key={p.id}&gt;
                      &lt;img src={p.thumbnailUrl} thumbnailUrl={p.thumbnailUrl} onClick={() =&gt; showPicture(p.url)}&gt;&lt;/img&gt;
                          &lt;div&gt;{p.title}&lt;/div&gt;
                  &lt;/div&gt;
              )}&lt;/div&gt;
              &lt;/div&gt;
              {/* {
                  photos.map(photo =&gt; &lt;div key={photo.id}&gt;{photo.title}&lt;/div&gt;)
              } */}
          &lt;/div&gt;
      )
  }
  
  
  
  export default DataFetching;
  </code></pre>