Question 215623 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How can I export an array from one component to App.js in React?

I’ve been trying to use array "components" in App.js, while the array is initialized in Sidebar.jsx component.
Sidebar.jsx :

import ...
const Sidebar = () => {
 ...
  const apps = [
    // name - kako se zove na sidebaru, icon-icon, jsx - ime componente bez .jsx
    { name: 'To Do App', icon: FaTasks, jsx: 'ToDo' },
    { name: 'Weather', icon: TiWeatherPartlySunny, jsx: 'Card' },
    { name: 'Finance Tracker', icon: FaMoneyBill, jsx: 'Tracker' },
    { name: 'Metronome', icon: BsFileEarmarkMusicFill, jsx: 'Metronome' },
  ];
   const components = apps.map((app)=>(app.jsx))
  
  return (
    <>
 <AppContext.Provider value={components}>
    
      ...
      {isOpen && (
        <div className='h-screen w-[310px] bg-white bg-opacity-90 top-0 right-0 fixed'>
          <div className='flex flex-row gap-3 my-7'>
            <RxAllSides className='text-4xl font-bold' />
            <h1 className='text-3xl'>All in One App</h1>
          </div>

          <div className='w-full flex-col justify-start align-start'>
            <h2 className='opacity-75 text-2xl py-5 ml-4'>APPS</h2>
            <div className='flex flex-col gap-7 mt-3'>
              {apps.map((app) => (
                <div
                  key={app.name}
                  className='flex w-full h-8 flex-row justify-between align-middle opacity-60 cursor-pointer relative hover:opacity-90 hover:scale-105 hover:transition-transform'
                  onClick={(e) => handleRender(e)}
                >
                  <app.icon className='text-3xl absolute top-[-4px] mr-2 left-9' />
                  <h2 className='text-2xl absolute left-[6.3rem]'>{app.name}</h2>
                </div>
              ))}
            </div>
          </div>
        </div>
      )}
    </AppContext.Provider>
    </>
  );
};

export default Sidebar;
And App.js:

import { AppContext } from './appContext';
...
function App() {
  
  const { components } = useContext(AppContext);
  return (
    <>
      <h1 className='text-black text-8xl text-center p-8 fancy-font '>All in One App</h1>
      <div className='App flex flex-row gap-[20px] flex-wrap relative'>
    
        {components.map((Comp, index) => (
            <Comp key={index} />
          ))}         
        <Sidebar/>

      </div>
    </>
  );
}

export default App;

I’ve tried to directly export it but it didn’t work. Now I’m trying to get it to work with useContext hook but I get an error saying components is not defined so I cant map through it. Help?

Tags:

3

Answers


  1. 0

    you can do like this

    export const apps = [
{ name: 'To Do App', icon: FaTasks, jsx: 'ToDo' },
{ name: 'Weather', icon: TiWeatherPartlySunny, jsx: 'Card' },
{ name: 'Finance Tracker', icon: FaMoneyBill, jsx: 'Tracker' },
{ name: 'Metronome', icon: BsFileEarmarkMusicFill, jsx: 'Metronome' },
];
and import it in apps like
import { apps } from './Sidebar';
    Login or Signup to reply.
  2. 0

    You can achieve the desired work without using useContext. You just need to pass a variable as prop in sidebar.js from App.js and retrieve the content array as function in App.js.

    Here is how to do this.

    SIDEBAR

    const sidebar =({handleComponents})=>{

 const apps = [
    { name: 'To Do App', icon: FaTasks, jsx: 'ToDo' },
    { name: 'Weather', icon: TiWeatherPartlySunny, jsx: 'Card' },
    { name: 'Finance Tracker', icon: FaMoneyBill, jsx: 'Tracker' },
    { name: 'Metronome', icon: BsFileEarmarkMusicFill, jsx: 'Metronome' },
  ];

handleComponents(apps)


//rest of code will be same
}

    APP

    import sidebar from 'path/to/sidebar';
const App =()=>{

return (
//rest of code is same

<Sidebar  handleComponents={(apps)=>{console.log(apps)
//access the components here and use accordingly

}} />
)}
    Login or Signup to reply.
  3. 0

    For context API to work, you need to have the component in which useContext is used as child (or child of child—any depth) of a context provider.

    For export to work, you need to export it outside any function.

    import ...

export yourArray = [...]

// your component 
function YourComponent() {
...
}

    Best way is to create constants in a separate file.

    However, it seems that for some reason, you are initializing the array inside of a component. In that case, you need to use global stores that do not require wrapping components inside provider.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search