Using state with array,map / How to pass variable

Question

function Header() {
    const first = (e) => {
       var result = new Map()
       axios.post('http://localhost:8000/' + query)
       .then(function(response){
         var content=JSON.parse(JSON.stringify(response)).data
         for (var i=0;i<content.data.length;i++){
           result.set(content.data[i].image_id, content.data[i].caption)
        }

         var key = Array.from(result.keys());  
         var value = Array.from(result.values());   
       
      }).catch(err => {
         console.log("error");
         alert(err);
       });
     };

   const second = () => {}
    

 return (
   <div>
       <button onClick={(e)=> { first(); second(); }}/>
       <img src={require(`img/img${key1}`)} className='modal_img'/>
   </div>
 );
}

export default Header;

'result' is a map, and I am trying to use keys in result.

( Because the keys of result(map) is image number that I am trying to use in img src path. --> ex ) img/img13.jpg )

I know that I have to use state, in order to pass variables. But don't know how to use.

(With code above I am getting this error--> 'key' is not defined no-undef)

start by adding a useState hook, see reactjs.org/docs/hooks-state.html — Ramesh Reddy
– Ramesh Reddy, Commented Aug 25, 2021 at 4:28

Mahesh · Accepted Answer · 2021-08-25 04:50:02Z

1

function Header() {
    const [keys, setKeys] = useState([]); // defining a state using hook
    
    axios.post('http://localhost:8000/' + query)
   .then(function(response){
       var content=JSON.parse(JSON.stringify(response)).data
       for (var i=0;i<content.data.length;i++){
         result.set(content.data[i].image_id, content.data[i].caption)
       }
       var key = Array.from(result.keys());
       setKeys(key);   // setting the state 
       var value = Array.from(result.values());
   });
}

so, you can use the state keys to access the name of the image wherever you want

you can find more about state hook here

answered Aug 25, 2021 at 4:50

Mahesh

3552 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

greenapple Over a year ago

I tried with this code and when I use key in image like this <img src={img/img${key[0]}.jpg}/> , I still get "'key' is not defined" error

Ishan Bassi · Accepted Answer · 2021-08-25 04:41:53Z

Use this code:

import { useState } from "react";

function Header() {
    const [result , setResult] = useState({})
    const first = (e) => {
       
       axios.post('http://localhost:8000/' + query)
       .then(function(response){
         var content=JSON.parse(JSON.stringify(response)).data
         for (var i=0;i<content.data.length;i++){
           setResult({...result, [content.data[i].image_id] :content.data[i].caption})
        }

         var key = Array.from(result.keys());  
         var value = Array.from(result.values());   
       
      }).catch(err => {
         console.log("error");
         alert(err);
       });
     };

   const second = () => {}
    

 return (
   <div>
       <button onClick={(e)=> { first(); second(); }}/>
       <img src={require(`img/img${key1}`)} className='modal_img'/>
   </div>
 );
}

export default Header;

You should also read the docs useState Hook

Collectives™ on Stack Overflow

Using state with array,map / How to pass variable

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related