Converting a const to own file in react

Question

This might be a noob react question (still learning), I have this constant:

const data = {
        first_name:   "John",
        last_name:    "smith",
        employee:     "Google"  
    };

That I pass to another function. This works but I want to move it to own file to make it more generic. If I move it to person-data.js:

import React, { useEffect } from "react";

const PersonData = props => {
    const data = {
        first_name:   "John",
        last_name:    "smith",
        employee:     "Google" 
    };
    return (
        {data}
  );
};

export default PersonData;

and in my main component:

import person from '../person-data'
.....
// temp to test
const data = {
        first_name:   "John",
        last_name:    "smith",
        employee:     "Google"  
    };
.....
somefunction(person) // doesnt work
somefunction(data)   // works

it no longer works, the reason I want to move it is so I can use props to pass the info dynamically. Is this even a good way to do this?

I have provided you with complete CodeSandBox Link also. codesandbox.io/s/upbeat-cookies-hdeiw?file=/src/PersonData.js . My answer is how we do this in React :) Check it once — Imran Rafiq Rather
– Imran Rafiq Rather, Commented Dec 23, 2020 at 20:39
I think I got your query now. When you said "but I want to move it to own file to make it more generic. If I move it to person-data.js". Generic means a seperate file with data only, not a React Component Bro :) Anyways, So, what you actually are doing is creating a seperate object to hold the data only. Is this a good Idea. I don't think so. Components are to hold state only to render that in JSX. Any way ;) That's is state management issue I guess :) — Imran Rafiq Rather
– Imran Rafiq Rather, Commented Dec 23, 2020 at 20:52

Jeff McMahan · Accepted Answer · 2020-12-23 20:38:01Z

1

It doesn't work because you're returning an object using destructuring syntax, without spreading the data object into the new object.

Try:

const PersonData = props => {
    const data = {
        first_name:   "John",
        last_name:    "smith",
        employee:     "Google" 
    };
    return {...data} // or just: return data
};

export default PersonData;

import person from '../person-data'
.....
// temp to test
const data = {
        first_name:   "John",
        last_name:    "smith",
        employee:     "Google"  
    };
.....
somefunction(person())

They way you have it in your code above, you are returning an object of the form:

{
   data: {
      first_name: 'John',
      last_name: 'smith',
      ...
   }
}

Thus you would have to lookup PersonData(props).data.first_name to get your first name, for example.

edited Dec 23, 2020 at 20:38

answered Dec 23, 2020 at 20:22

Jeff McMahan

1,32312 silver badges15 bronze badges

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

6 Comments

Rain Man Over a year ago

this didnt work, I passed it like this after import somefunction(person) but it is not working the same as somefunction(data)

Jeff McMahan Over a year ago

Ah, that's because you're exporting a function (see edit). That is, person is a function, not an object. It returns an object when it is called. You're importing it and passing it as if it were still an object (like data)

Rain Man Over a year ago

this returned the correct data somefunction(person()). To better understand this, why it wasnt working with person if it returns the object similar to data?

Jeff McMahan Over a year ago

Excellent. Does that answer your question, then? Or is there more I can help out with?

Jeff McMahan Over a year ago

const PersonData = props => {...} stores an arrow function in the variable PersonData. Then export default PersonData; exports that variable, and again the value of that variable is the arrow function. Consequently, when you import it with import person from '../person-data' you're storing that arrow function in the local variable person. So, if you were to do: console.log(typeof person) you'd see: "function". For that reason, you want to call the function, since it returns the data object. So console.log(person()) produces: "{first_name, ...}". Does that make sense?

|

Michiel · Accepted Answer · 2020-12-23 20:23:19Z

0

const personData = {
  first_name: "John",
  last_name: "smith",
  employee: "Google" 
};
export default personData;

You can export the const. It doesn't need to be within a component. If you want to change the values, you could make a function. E.g.

function getPersonData(firstName) {
  return {
    first_name: firstName,
    last_name: "smith",
    employee: "Google" 
  };
}

answered Dec 23, 2020 at 20:23

Michiel

3632 silver badges9 bronze badges

Comments

Antonio Balsamo · Accepted Answer · 2020-12-23 20:30:29Z

0

If I understood what you mean, what you have to do is to create a file personData.js with this content:

const personData = {
    first_name: "John",
    last_name: "Smith",
    employee: "Google"  
};

export default personData;

And then import the previous file where you need it

import personData from './personData.js';

and you can access to personData.first_name, personData.last_name and personData.employee where you need.

edited Dec 23, 2020 at 20:30

answered Dec 23, 2020 at 20:26

Antonio Balsamo

1557 bronze badges

2 Comments

Jeff McMahan Over a year ago

But, why would this javascript file have a .json extension?

Antonio Balsamo Over a year ago

it was a typo, fixed it

Imran Rafiq Rather · Accepted Answer · 2020-12-23 20:43:36Z

0

You need to export this file from there and import in your component.

CODESANDBOX WORKING DEMO: https://codesandbox.io/s/upbeat-cookies-hdeiw?file=/src/PersonData.js

person-data.js file:

const data = {
    first_name:   "John",
    last_name:    "smith",
    employee:     "Google"  
};

export default data;

Now in your Component import it.

import React, { useState, useEffect } from "react";

import personData from "./person-data.js"; // Provide your relative path

const PersonData = (props) => {
  const [data, setData] = useState(personData);
  return (
    <>
      <div>
        <p>{data.first_name}</p>
        <p>{data.last_name}</p>
        <p>{data.employee}</p>
      </div>
    </>
  );
};

export default PersonData;

edited Dec 23, 2020 at 20:43

answered Dec 23, 2020 at 20:22

Imran Rafiq Rather

8,2881 gold badge23 silver badges41 bronze badges

5 Comments

Rain Man Over a year ago

yes, I already imported it in my other component

Imran Rafiq Rather Over a year ago

Then you can store it in the state. Let me update my answer further :) Wait bro

Imran Rafiq Rather Over a year ago

I have provided complete code in my update. If you have any questions, feel free to ask :)

evolutionxbox Over a year ago

Consider not returning inside a return.

Imran Rafiq Rather Over a year ago

@evolutionxbox: Oh dear! That was a typo in the code. But codesandbox.io/s/upbeat-cookies-hdeiw?file=/src/… is my codesandbox solution :)

Collectives™ on Stack Overflow

Converting a const to own file in react

4 Answers 4

6 Comments

Comments

2 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

Comments

2 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related