import const array React

Question

I try to import an array into my parent component and send that data as props to his child

import Seed from './const/Seed';

export default class ProductList extends React.Component{
  render() {
    const product = Seed.products[0]
    return(
      <div>
        <Product 
        id = {product.id}
        title = {product.title}
        />
      </div>
    );
  }
}

and i received an error: TypeError: Cannot read property '0' of undefined

maybe i did not format the right way? or is there a way to declare a const on a different file?

export default class Seed extends React.Component{
  render(){
    const products  = [
      {
        id: 1,
        title: 'Yellow Pail',
      },
      {
        id: 2,
        title: 'Green Pail',
      }
    ]
    return products
  }
}

Thank you

Ajay Gaur · Accepted Answer · 2018-05-01 09:08:25Z

35

The seed file should be :

export const products  = [
  {
    id: 1,
    title: 'Yellow Pail',
  },
  {
    id: 2,
    title: 'Green Pail',
  },
]

export default {
    products,
}

and import them as (and usage as) :

import {products} from './const/Seed';
export default class ProductList extends React.Component{
  render() {
    const product = products[0]
    return(
      <div>
        <Product 
        id = {product.id}
        title = {product.title}
        />
      </div>
    );
  }
}

render method is used to render your content on the browser and not for exporting the constants. Please review react/JavaScript once more

answered May 1, 2018 at 9:08

Ajay Gaur

5,2807 gold badges41 silver badges64 bronze badges

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

Collectives™ on Stack Overflow

import const array React

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related