Object into an array then return a component - React JS Application

Question

Evening fellow developers,

I've rewrote a React JS application, but I've just hit a brick wall.

I have a form which adds some data to a database, specifically Firebase googles very own cloud based database solution. However, now I'm trying to fetch the data and render the components below but I'm sure how to do this.

What I receive from Firebase as a response :

Response From Firebase

Currently I'm just logging the response to show I do receive a response, I have set the response to an empty state. On render it gets set to the response from the server.

I want to be able to now convert the objects into an array which can then return an array of responses. The array will then be looped through and transformed into components which will get rendered below as I specified above.

Can someone assist me with this task as I'm very unsure how to accomplish this task. I will appreciate any responses to my question.

Github Link: https://github.com/AlexMachin1997/React-JS-Contact-Book What i have so far:

componentDidMount () {

  axios.get("/contact.json")

  .then(response => {
      this.setState({
          contactsArray: response.data.person
      })
      console.log(this.state.contactsArray)
  })

  //Any Errors The Error State Is Set To True
  .catch (error => {
  console.log(error)
  })

}

It would be better paste the response here with code block and show us what you tried up to now? So, you just want to render the response objects, yes? — devserkan
– devserkan, Commented Jun 24, 2018 at 23:20
I meant the response itself. What you show us how you get the data and set the state. This is OK. Doesn't my answer work for you? — devserkan
– devserkan, Commented Jun 25, 2018 at 16:55

joknawe · Accepted Answer · 2018-06-24 23:33:26Z

1

To convert the response object into an array you can use Object.keys or Object.values

Object.values(firebaseResponse);

or

Object.keys(firebaseResponse).map((x) => { 
    // additional transformation
    return x;
});

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Object/values https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys

answered Jun 24, 2018 at 23:33

joknawe

1,54012 silver badges16 bronze badges

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

Comments

devserkan · Accepted Answer · 2018-06-25 00:11:23Z

0

You can use Object.values or Object.keys to get an array from your object. But Object.keys is more suitable if you don't have unique id's in your persons object since you will need a key to iterate a JSX prop or your component. If response is in your root state:

  render() {
    const obj = this.state;
    return (
        Object.keys( obj ).map( objKey =>
        (
          <div key={objKey}>
              <p>Name: {obj[objKey].persons.name}</p>
              <p>Email: {obj[objKey].persons.email}</p>
              <p>Phone: {obj[objKey].persons.phone}</p>
          </div>
        )
      )
    );
  }

or pass it to another component:

render() {
    const obj = this.state;
    return (
      Object.keys(obj).map(objKey =>
          <Person obj={obj} objKey={objKey} />
      )
    );
  }

With Object.values this will be slightly cleaner but you should use something unique for your key. I've chosen email property since emails are unique.

  render() {
    const obj = this.state;
    return (
      Object.values(obj).map(value =>
        (
          <div key={value.persons.email}>
            <p>Name: {value.persons.name}</p>
            <p>Email: {value.persons.email}</p>
            <p>Phone: {value.persons.phone}</p>
          </div>
        )
      )
    );
  }

or again with a component:

render() {
    const obj = this.state;
    return (
      Object.values(obj).map(value =>
          <Person value={value} />
      )
    );
  }

answered Jun 25, 2018 at 0:11

devserkan

17.7k4 gold badges34 silver badges48 bronze badges

3 Comments

Alex Machin Over a year ago

Sorry to everyone who response to this question . I completely forgot I posted the question here. I did find a solution to my problem in the end I just did this instead

Alex Machin Over a year ago

const arrayOfComponents = []; for(let key in this.state.contactsArray) { arrayOfComponents.push({ id: key, config: this.state.contactsArray[key] }); } console.log(arrayOfComponents) let contacts = ( <div> <div className="row"> {arrayOfComponents.map(component => ( <Contacts key={component.id} component={component.config.persons} /> ))} </div> </div> )

Alex Machin Over a year ago

But I'm now facing an issue when I update the child from the parent It doesn't re-render.

Collectives™ on Stack Overflow

Object into an array then return a component - React JS Application

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related