Блог

При нажатии кнопки «Добавить пользователя» имя пользователя и пароль добавляются в массив. Это должно отображаться на <ul> элементе. Данные находятся в массиве, по какой-то причине они не выводятся на страницу. Мне кажется, это должно сработать.

Есть идеи, почему? Вот мой код.

Это происходит потому, что вы не return li map блокируете.

Вы можете исправить это, добавив return :

 const UsersList = props => {
  return (
    <Card className={classes.users}>
      <ul>
        <li>1st element</li>
        {props.users.map((user, ndx) => {
          console.log(user);
          return (
            <li key={ndx}>
              {user.username} - {user.password}
            </li>
          );
        })}
      </ul>
    </Card>
  );
};
 

Примечание: старайтесь всегда добавлять ключ при циклическом использовании массива map , я добавил индекс здесь в качестве ключа, но лучше, чтобы он принадлежал id пользователю или другому unique свойству, потому что:

Ключи помогают определить, какие элементы были изменены, добавлены или удалены. Ключи должны быть даны элементам внутри массива, чтобы придать элементам стабильную идентичность

https://reactjs.org/docs/lists-and-keys.html#keys

Вы не возвращаете React, он содержит скобки (на многострочной)

 import React from 'react';

import Card from '../UI/Card';
import classes from './UsersList.module.css';

const UsersList = props => {
  return (
    <Card className={classes.users}>
      <ul>
        <li>1st element</li>
        {props.users.map(user => {
          return (
          <li>
            {user.username} - {user.password}
          </li>
          )
        })}
      </ul>
    </Card>
  );
};

export default UsersList;
 

Это происходит потому, что в вашем UserList.js вы не возвращаете функцию <li> из карты.

 const UsersList = props => {
  return (
    <Card className={classes.users}>
      <ul>
        <li>1st element</li>
        {props.users.map(user => {
          console.log(user);
          return (
            <li>
              {user.username} - {user.password}
            </li>
          );
        })}
      </ul>
    </Card>
  );
};