react передача данных дочернему элементу

[riaron86]

Не выводит значения но и ошибок не выдает
Вот родительский:

import React from 'react';
import Item from './item';

function ItemsList() {
  const arrayse={'id':1,'description':'desc'}
  return (
    <Item arrayse={arrayse}/>
  );
}

export default ItemsList;

Вот дочерний

import React from 'react';


function Item(arrayse) {
  return (
    <div>
      <p>ID:{arrayse.id}</p>
      <p>Desc:
      {arrayse.description}
      </p>
    </div>
  );
}

export default Item;

[riaron86]

Выставляю полное приложение измененное
index.js

import React, {createContext} from 'react';
import ReactDOM from 'react-dom';
import App from './App';


export const Context = createContext(null)
const arrayse={'id':1,'description':'desc'};
ReactDOM.render(
    <Context.Provider value={{
        arrayse:arrayse
    }}>
        <App />
    </Context.Provider>,
    document.getElementById('root')
);

app.js

import React from 'react';
import Shop from './pages/Shop'
function App() {
  return (
    <Shop/>

  )
}
export default App;

Shop.js

import React from 'react';
import ItemsList from '../components/itemsList';
function Shop() {
  return (
    <ItemsList/>
  );
}
export default Shop;

itemsList

import React,{useContext} from 'react';
import Item from './item';
import {Context} from "../index";
function ItemsList() {
  const {arrayse} = useContext(Context)
  return (
    <Item arrayse={arrayse}/>
  );
}

export default ItemsList;

item остается неизменным

[ksa]

Не выводит значения

С пропсами ты не умеешь еще работать...

Вот рабочий вариант

import React,{createContext, useContext} from 'react';
import ReactDOM from 'react-dom/client';
 
const Context = createContext(null)
const arrayse={'id':1,'description':'desc'}
//
function App() {
	return (
		<Shop/>
	)
}
//
function Shop() {
	return (
		<ItemsList/>
	);
}
//
function ItemsList() {
	const {arrayse} = useContext(Context)
	return (
		<Item arrayse={arrayse}/>
	);
}
//
function Item({arrayse}) {
	return (
		<div>
			<p>ID: {arrayse.id}</p>
			<p>Desc: {arrayse.description}</p>
		</div>
	);
}



const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Context.Provider value={{arrayse:arrayse}}>
		<App />
	</Context.Provider>
);

В примере я применил деструктуризацию параметров (пропсов)...

[riaron86]

вынес itrem в отдельный файл и добавил в index import Item from '/components/item/';
item не тменял(как в самом первом посте)

[riaron86]

ERROR in ./src/index.js 7:0-37
Module not found: Error: Can't resolve '/components/item/' in 'C:\react\client\src'
Compiled with problems:
×
ERROR in ./src/index.js 7:0-36
Module not found: Error: You attempted to import /components/item which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.
You can either move it inside src/, or add a symlink to it from project's node_modules/.
Did you mean './/components/item'?
Requests that should resolve in the current directory need to start with './'.
Requests that start with a name are treated as module requests and resolve within module directories (node_modules, C:\react\client\node_modules).
If changing the source code is not an option there is also a resolve options called 'preferRelative' which tries to resolve these kind of requests in the current directory too.

копирую название components из сообщения в название папки ничего не меняется
а папка находится src

[riaron86]

Где здесь ошибка?
index.js
src\components\itemsList.js
Line 4:34: 'Context' is not defined no-undef

Search for the keywords to learn more about each error.

import React,{createContext} from 'react';
import ReactDOM from 'react-dom/client';
import ItemsList from "./components/itemsList";

const Context = createContext(null)
const arrayse=[
     {'id':1,'description':'description1'},
     {'id':1,'description':'description1'},
     {'id':1,'description':'description1'},
     {'id':1,'description':'description1'},
     {'id':1,'description':'description1'},
    ];
//
function App() {
    return (
        <Shop/>
    )
}
//

function Shop() {
    return (
        <ItemsList/>
    );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Context.Provider value={{arrayse:arrayse}}>
        <App />
    </Context.Provider>
);

itemsList.js

import React, {useContext} from 'react';
import Item from './item.js';
function ItemsList()  {
    const {arrayse} = useContext(Context)
    return (
        arrayse.map(array=><Item arrayse={array}/>)

    );
}

export default ItemsList;

item.js

import React from 'react';

function Item ({arrayse}) {
    return (
        <div>

            <h1>id:{arrayse.id}</h1>

            <p>desc: {arrayse.description}</p>

        </div>
    );
}

[Nexus]

riaron86, из index'а константа Context не экспортируется, а в itemsList она же не импортируется.