1

Im new to react so this may be a noob question. Im trying create a side bar that only displays links depending on if a variable is set.

but first im just trying to create a useState hook that is an array of import components and map through them with some dummy data.

The problem is it keeps tell me the component is undefined when trying to map through them.

error:TypeError: Cannot read property 'SideBarLink' of undefined

What am I doing wrong? Also if there is a better way to do what I am trying to please lmk.

SideBar.jsx------------------------------------------------------

]

import React, { useState } from 'react';
import SideBarLink from 'react';


const SideBar = () => {
   
    const [sidelinks, setSideLinks] = useState( SideBarLink[
        {
          id:   1,
          name: 'Projects',
          displayLink: true
        },
        {
          id:   2,
          name: 'Tickets',
          displayLink: true
        }
    ]);
   
  const  handleClick =() =>
   {
    console.log(sidelinks);
   }
   
 
   let  slinks = (
    <div>
        <button onClick={handleClick}>button</button>
        <div className="w3-sidebar w3-bar-block" >
        { 
            sidelinks.SideBarLink.map((SideBarLink, index) => 
                {
                return <SideBarLink />
                })     
        }
        </div>
      
    </div>
    );

   
   
    return slinks;
}
 
export default SideBar;

SideBarLink.jsx-------------------------------------

import React from 'react';

const SideBarLink = ( props ) => {
  return (
  <a href="#" className="w3-bar-item w3-button">{props.name}</a>
  )
 };
 
 export default SideBarLink;
Gandi Loze
  • 11
  • 1
  • Hey @Gandi, I'm not sure why you're mapping that way. But, can you try `sidelinks.map((link, i) => `. – bertdida Sep 10 '20 at 01:20
  • Also your `useState` seems incorrect, I don't know if that's valid in `jsx` but in `js` you dont have to wrap your objects inside `SideBarLink`. – bertdida Sep 10 '20 at 01:29
  • @bertdida thanks for the reply, if there is a better way to do this? Im new to react. Im trying to make a hook with use state that is an array of the imported SideBarLink Component – Gandi Loze Sep 10 '20 at 01:31
  • This should work, `useState([ {id:1, name: "name 1"}, {id:2, name: "name 2"} ]);`. And then you map these, as what I suggest in my first comment. – bertdida Sep 10 '20 at 01:48

0 Answers0