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

my console.log

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 >
            <div>
              <p >{item.title}</p>
            </div>
          </div>
        </td>
        <td>
          <span >{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" >Link</a>
        </th>
      </tr>
    )
  })
}

CodePudding user response：

      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 >
                       <div>
                           <p >{item.title}</p>
                       </div>
                   </div>
               </td>
               <td>
                   <span >{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" >Link</a>
               </th>
           </tr>
       )
   })
}

CodePudding user response：

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;

CodePudding user response：

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