Build dropdown menu with array passed from parent component

Question

I am trying to build a dropdown-menu and add data from my array to the dropdown-item. My current code isn't returning anything into my const Users. How can I use the array to add data into the dropdown-item?

UserDisplay component

   const UserDisplay = ({ users }) => {
      const Users = users.map(user => {
        let i = 0;
        <a className="dropdown-item" href="#">
          {user[i]}
        </a>;
        i++;
      });
      return (
        <div className="dropdown-menu" id="users">
          <a className="dropdown-item" href="#">
            Online Users
          </a>
          <div className="dropdown-divider" />
             {Users}
        </div>
      );
    };

Parent Component ChatLayout

return (
      <div className="chat navbar fixed-bottom">
        <div className="btn-group dropup">
          <button
            type="button"
            className="btn btn-secondary dropdown-toggle"
            data-toggle="dropdown"
            aria-haspopup="true"
            aria-expanded="false"
          >
            Chat
          </button>
          <UserDisplay users={[this.state.users]} />
        </div>
        <ul id="messages">
          <div />
        </ul>
        <form onSubmit={this.onSubmit}>
          <textarea
            name="message"
            placeholder="Enter your message here"
            autoComplete="off"
            type="submit"
            onKeyDown={this.onEnterPress}
            value={this.state.message}
            onChange={this.onChange}
          />
          <input type="submit" className="btn btn-info btn-block mt-4" />
        </form>
      </div>
    );

Can you add all of the relevant code? Does UserDisplay live inside a component? Where is the parent component? — Carol Skelly, Aug 11 '18 at 14:54
Why do you want to use an index for `user[i]`? You can use the index passed to the function instead `users.map((user, i) => { ... })`. You are not returning the JSX from the function given to `map` either. — Tholle, Aug 11 '18 at 15:04
I didn't know I could use that index. And as far as not returning the function given to map, why wouldn't using the return statement with the `const Users` work? Since im not retrurning from map, I am using that value im creating. @Tholle — Snoopy, Aug 11 '18 at 15:15
The function given to `map` (`users.map(function myFunction() { ... })` has to return something, or else the resulting array will just contain a bunch of `undefined` values. You need to `return ...`. Do you really want to access `user[index]`? There might be something else in the `user` object you want to render. — Tholle, Aug 11 '18 at 15:18

Carol Skelly · Accepted Answer · 2018-08-11T15:25:41.247

You don't need to define and iterate i.. the .map already keeps track of the array index. Assuming users has data it should work like this...

  UserDisplay(users) {
      const Users = users.map((user,i) => {
        return (
            <a className="dropdown-item" key={i} href="#">
              {user}
            </a>)
      });
      return (
        <div className="dropdown-menu" id="users">
          <a className="dropdown-item" href="#">
            Online Users
          </a>
          <div className="dropdown-divider" />
          {Users}
        </div>
      );
  };

Working Codeply: https://www.codeply.com/go/DnqpGhozra

score 0 · Answer 2 · answered Aug 11 '18 at 15:17

You are destructing props object and get users out of it so its fine. basically map returns a list of array so you dont have return anything.

You need to iterate to the first element of users like

const Users = users[0].map((user,i) => {
        console.log(user);
        return (
            <a className="dropdown-item" key={i} href="#">
              {user}
            </a>)
      });

OR just pass users directly

 <UserDisplay users={this.state.users} />

Build dropdown menu with array passed from parent component

2 Answers2