Build dropdown menu with array passed from parent component [duplicate]

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
– Carol Skelly, Commented Aug 11, 2018 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
– Tholle, Commented Aug 11, 2018 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
– Snoopy, Commented Aug 11, 2018 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 <a className="dropdown-item" href="#"> .... Do you really want to access user[index]? There might be something else in the user object you want to render. — Tholle
– Tholle, Commented Aug 11, 2018 at 15:18

Carol Skelly · Accepted Answer · 2018-08-11 15:25:41Z

0

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

edited Aug 11, 2018 at 15:25

answered Aug 11, 2018 at 15:08

Carol Skelly

364k92 gold badges741 silver badges651 bronze badges

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

Comments

Atul · Accepted Answer · 2018-08-11 15:17:44Z

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} />

Collectives™ on Stack Overflow

Build dropdown menu with array passed from parent component [duplicate]

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related