React JS: map() not working for object of arrays

Question

I tried mapping through the arrays with an API call responseTwo.data.searched_items which gives me a console.log of an object of arrays but my map in HTML doesn't do anything.

var responseTwo = []

axios.request(optionsTwo).then(function (response) {
  responseTwo = response

}).catch(function (error) {
  console.error(error);
});

My HTML

{
  responseTwo.data.searched_items.map((item, index) => {
    return (
      <tr key={index}>
        <td>
          <div class="flex items-center space-x-3">
            <div>
              <p class="font-bold">{item.title}</p>
            </div>
          </div>
        </td>
        <td>
          <span class="badge badge-ghost badge-sm">{item.condition}</span>
        </td>
        <td>
          <p>${item.price.value}</p>
        </td>
        <td>
          <p>$140</p>
        </td>
        <td>
          <p className='text-accent'>$40</p>
        </td>
        <th>
          <a href={item.url} target="_blank" class="btn btn-primary">Link</a>
        </th>
      </tr>
    )
  })
}

Do you return that?

User456
– User456

2022-06-14 08:51:44 +00:00
Commented Jun 14, 2022 at 8:51 — User456
– User456, Commented Jun 14, 2022 at 8:51
yeah i return it before this html

nick
– nick

2022-06-14 09:11:38 +00:00
Commented Jun 14, 2022 at 9:11 — nick
– nick, Commented Jun 14, 2022 at 9:11

Amandeep Singh · Accepted Answer · 2022-06-14 14:13:29Z

1

      const [responseTwo, setResponseTwo] = useState([])
   
       axios.request(optionsTwo).then(function (response) {
               setResponseTwo(response)
   
           }).catch(function (error) {
               console.error(error);
           });
   

{responseTwo.data.searched_items.length > 0  && responseTwo.data.searched_items.map((item, index) => {
       return (
           <tr key={index}>
               <td>
                   <div class="flex items-center space-x-3">
                       <div>
                           <p class="font-bold">{item.title}</p>
                       </div>
                   </div>
               </td>
               <td>
                   <span class="badge badge-ghost badge-sm">{item.condition}</span>
               </td>
               <td>
                   <p>${item.price.value}</p>
               </td>
               <td>
                   <p>$140</p>
               </td>
               <td>
                   <p className='text-accent'>$40</p>
               </td>
               <th>
                   <a href={item.url} target="_blank" class="btn btn-primary">Link</a>
               </th>
           </tr>
       )
   })
}

edited Jun 14, 2022 at 14:13

Amandeep Singh

8786 silver badges9 bronze badges

answered Jun 14, 2022 at 8:48

Narek Grigoryan

4494 silver badges10 bronze badges

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

1 Comment

nick Over a year ago

Thank you for the reply, however, nothing renders?

Narek Grigoryan · Accepted Answer · 2022-06-14 11:46:08Z

this is tested for me

import {useState} from "react";

function App() {
    const [responseTwo, setResponseTwo] = useState([])

    setTimeout(() => {
        setResponseTwo([{name: 'Narek', title: 'Armenia'}, {name: 'Ani', title: 'French'}, {name: 'Gridoryan', title: 'USA'}])
    }, 5000)

    return (
        <div>
            {
                responseTwo.length > 0 && responseTwo.map((item, index) => {
                    return (
                        <tr key={index}>
                            <td>
                                <div className="flex items-center space-x-3">
                                    <div>
                                        <p className="font-bold">{item.name}</p>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <span className="badge badge-ghost badge-sm">{item.title}</span>
                            </td>
                            <td>
                                {/*<p>${item.price.value}</p>*/}
                            </td>
                            <td>
                                <p>$140</p>
                            </td>
                            <td>
                                <p className='text-accent'>$40</p>
                            </td>
                            <th>
                                {/*<a href={item.url} target="_blank" className="btn btn-primary">Link</a>*/}
                            </th>
                        </tr>
                    )
                })
            }
        </div>
    )
}

export default App;

Anand Garg · Accepted Answer · 2022-06-14 12:01:56Z

0

Map provides three methods that return iterable: map.keys(), map.values() and map.entries(). Try on of them with for..in loop.

answered Jun 14, 2022 at 12:01

Anand Garg

1241 silver badge8 bronze badges

Collectives™ on Stack Overflow

React JS: map() not working for object of arrays

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related