Data not rendered in ui in react using useeffect

Question

I have three components for about page. For now they are using static data. I add a component that contains a snippet for getting data from backend which is serving in Heroku. I added the url in the component using useEffect. I have solved the cors issue, the data is coming in console but not in the ui.

The ui looks like this:

The dummy data " Iam here" is rendered but not the data from api.

My api component is here:

function Contactinfoapi() {
    const [contacts, setContacts] = useState([])

    useEffect (() => {
        axios.get('https://example.herokuapp.com/api/contactinfo')
        .then(res =>{
            console.log(res)
            setContacts(res.data)
        })
        .catch(err =>{
            console.log(err)
        })
    },[])
    return (
        <div>
           <li className='aboutinfo'>{contacts.open_hour}</li>
           <li>{contacts.close_hour}</li>
           <li>{contacts.phone_1}</li>
           <li>{contacts.phone_2}</li>
           <li>{contacts.stree_name}</li>
           <li>{contacts.city}</li>
           <li>{contacts.state}</li>
           <li>{contacts.country}</li>
           <li className='aboutinfo'>{"Iam here"}</li>
        
    )
}

export default Contactinfoapi

My ContactPage.txs

import Contactinfoapi from "./Contactinfoapi";

const mapLink =
  "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6570.131683578319!2d-96.8230730791484!3d32.926443635844755!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x8092bd3dbb07ed!2sGrand%20Lux%20Cafe!5e0!3m2!1sen!2snp!4v1626151670035!5m2!1sen!2snp";

class ContactPage extends Component {
  render() {
    return (
      <div className="contact-page">
        <PageHeader title="Contact Us" btnText="" />
        <div className = 'aboutinfo'>
          <ContactCards /> 
        </div>
        
        <Contactinfoapi />
        <div className="map-container">
          <iframe
            src={mapLink}
            title="map"
            loading="lazy"
            className="map"></iframe>
        </div>
      </div>
    );
  }
}

export default ContactPage;

Here I have imported Contactinfoapi but the data are not rendered to the ui. What is the issue??

Answer 1

try this in contactinfoapi component With Map function Contactinfoapi() { const [contacts, setContacts] = useState([])

useEffect (() => {
    axios.get('https://example.herokuapp.com/api/contactinfo')
    .then(res =>{
        console.log(res)
        setContacts(res.data)
    })
    .catch(err =>{
        console.log(err)
    })
},[])
return (
<div>
contacts.map(contact=>{
<div>
       <li className='aboutinfo'>{contact.open_hour}</li>
       <li>{contact.close_hour}</li>
       <li>{contact.phone_1}</li>
       <li>{contact.phone_2}</li>
       <li>{contact.stree_name}</li>
       <li>{contact.city}</li>
       <li>{contact.state}</li>
       <li>{contact.country}</li>
       <li className='aboutinfo'>{"Iam here"}</li>
    </div>
})
  </div>   
)

}

Since you are specifying contacts to be an array we need to iterate over it. Without Map

 function Contactinfoapi() {
const [contact, setContacts] = useState({})

useEffect (() => {
    axios.get('https://example.herokuapp.com/api/contactinfo')
    .then(res =>{
        console.log(res)
        setContacts(res.data[0])
    })
    .catch(err =>{
        console.log(err)
    })
},[])
return (

<div>
       <li className='aboutinfo'>{contact.open_hour}</li>
       <li>{contact.close_hour}</li>
       <li>{contact.phone_1}</li>
       <li>{contact.phone_2}</li>
       <li>{contact.stree_name}</li>
       <li>{contact.city}</li>
       <li>{contact.state}</li>
       <li>{contact.country}</li>
       <li className='aboutinfo'>{"Iam here"}</li>
    </div>

    
)

}