React - Map Over Array Of Components To Return

Question

Im trying to dynamically print a lot of components into a li list.

In the parent component, the list menuLinks is an array. Each child of menuLinks is a component (LinkToChangePassword is a react functional component):

export default class Header extends Component{
  constructor(props){
    super( props );
  }

  render(){
    const menuLinks = [
      LinkToChangePassword,
      LinkToResetPassword,
      LinkToChangeEmail,
      LinkToLogOut
    ];
    return(
      <div className="header">
        <LinkToHome classAttr=""/>
        <h1 className="">{ this.props.heading }</h1>
        <DropDownMenu links = { menuLinks }/>
      </div>
    );
  }
}

In my child component, I'd like to attach these components:

export default class DropDownMenu extends Component{
  constructor( props ){
    super( props );
  }

  render(){
    let renderMenuItems = this.props.links.map(
      ( item, i ) => <li className = "menuItem"
                         key = {`li${i}`}>
                         {item}
                     </li>
    );
    return <ul className = "profileMenu">
            { renderMenuItems }
          </ul>;
  }
}

However, this doesnt work & I get empty list.

duwalanise · Accepted Answer · 2017-01-13 08:13:13Z

3

Try this once. Maybe this can help.

 const menuLinks = [
  <LinkToChangePassword />,
  <LinkToResetPassword />,
  <LinkToChangeEmail />,
  <LinkToLogOut />
];

Here is a fiddle https://jsfiddle.net/jwm6k66c/1785/

answered Jan 13, 2017 at 8:13

duwalanise

1,3021 gold badge14 silver badges24 bronze badges

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

Comments

Pineda · Accepted Answer · 2017-01-13 13:26:09Z

2

Your trying to reference a react component by name only in JSX without surrounding it with angled brackets:

ComponentNameHere instead of: <ComponentNameHere>

One solution:

You'll need to ensure you are importing you components into you DropDownMenu class.

You can then replace {item} statement within your .map call to use React.createElement()

{React.createElement(item, null)}

Amended render function:

render(){
  let renderMenuItems = this.props.links.map( ( item, i ) => 
    <li className = "menuItem" key = {`li${i}`}>
      {React.createElement(item, null)}
   </li>
  ); 
  return <ul className = "profileMenu"> { renderMenuItems } </ul>;
}

edited Jan 13, 2017 at 13:26

answered Jan 13, 2017 at 7:52

Pineda

7,5933 gold badges34 silver badges47 bronze badges

1 Comment

Pineda Over a year ago

They may be made but to use them within JSX you need to call them with angled brackets. I have not found a way to do this dynamically via JSX, but since JSX is just syntactic sugar for methods like React.cresteRlement, using it in your call as I stated above will work

Collectives™ on Stack Overflow

React - Map Over Array Of Components To Return

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related