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??

Your state contacts is array so you need to render array with map function. Check this out: stackoverflow.com/a/41374730/8665589 — Priyank Kachhela
– Priyank Kachhela, Commented Jul 26, 2021 at 7:24
Although i am using array, i have only one contact object coming from backend (because there will be only one contact for company). How to use map in such case?? can you write it for me?? — Reactoo
– Reactoo, Commented Jul 26, 2021 at 7:27

anand shukla · Accepted Answer · 2021-07-26 08:18:11Z

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>

    
)

}

hello @anand, thank you so much for your effort. What if i dont want it to be array, since it will be only one contact always. can you write the code without using array for me??
I got the error saying 'Contactinfoapi' cannot be used as a JSX component. Its return type 'void[]' is not a valid JSX element. Type 'void[]' is missing the following properties from type 'Element': type, props, key
@Django-Rocks i have also added code for single object. It is not tested though.
i don't know what you are trying but from your code snippet i guess you are missing ul element. Try adding all li element inside one parent ul element. Hope this helps.

Collectives™ on Stack Overflow

Data not rendered in ui in react using useeffect

1 Answer 1

7 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Linked

Related