How can i export something on react.js

Question

I need to import "Item" and i used that;

import Item from './Item' But there is a "Attempted import error" mistake => Attempted import error: './Item' does not contain a default export (imported as 'Item'). I added the "Item" under the header class;

 </Header>
  <Items>
  {items.map(item=>(<Item></Item>)
  )}
  </Items>

Does this answer your question? [What is "export default" in JavaScript?](https://stackoverflow.com/questions/21117160/what-is-export-default-in-javascript) — Alejandro, Aug 17 '21 at 19:39
There is no `import` or `export` in the code you have provided. Please provide an [mre]. — zero298, Aug 17 '21 at 20:06

score 0 · Answer 1 · answered Aug 17 '21 at 19:44

0

Your Item component does not export any default code use something like import {Item} from './Item or inside ITem File use something like export default ITem you can read more import-export

answered Aug 17 '21 at 19:44

Moufeed Juboqji

690
4
11

score 0 · Answer 2 · answered Aug 17 '21 at 21:31

You must export the Item component that you can import the Item component elsewhere. A example:

Item.js:

function Item() {
    return (
        <div>
            // Item stuff
        </div>
    )
}
    
export default Item;

Note: the important here is the export default Item;. So that you can import the Item component in other components with import Item from './ItemPath';. Of course you must set the right path to your Item component.

Example.js:

import Item from './ItemPath';

function Example() {
    return (
        <div>
            </Header>
            <Items>
            { items.map((item) => (
                <Item>Some item</Item>
            )}
            </Items>
         </div>
    )
}

How can i export something on react.js

2 Answers2