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: https://stackoverflow.com/a/41374730/8665589 — Priyank Kachhela, Jul 26 '21 at 07: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, Jul 26 '21 at 07:27

anand shukla · Accepted Answer · 2021-07-26T08:18:11.537

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>

    
)

}

edited Jul 26 '21 at 08:18

answered Jul 26 '21 at 07:40

anand shukla

666
5
14

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?? – Reactoo Jul 26 '21 at 08:01
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 – Reactoo Jul 26 '21 at 08:10
make a parent div before map and enclose all inside this – anand shukla Jul 26 '21 at 08:14
@Django-Rocks i have also added code for single object. It is not tested though. – anand shukla Jul 26 '21 at 08:15
hello @anand, i used your second snippet but got same error of Contactinfoapi' cannot be used as a JSX component what is the issue? – Reactoo Jul 26 '21 at 08:29
1

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. – anand shukla Jul 26 '21 at 08:58
i just used your second snippet. I have put all list inside a single div just like you – Reactoo Jul 26 '21 at 09:03

Data not rendered in ui in react using useeffect

1 Answers1