Map over data returned from aws-sdk on React

Question

I am using AWS Amplify for an application but it lacks the ability to admin users so I am using the aws-sdk in the short term until they add the feature.

I have been able to get data returned from a promise using the following code:

const ListUsers = () => {
  const [users, setUsers] = useState([]);
  useEffect(() => {
    const getUsers = () => {
      var params = {
        UserPoolId: USER_POOL_ID,
        AttributesToGet: ['given_name']
      };

      return new Promise((resolve, reject) => {
        AWS.config.update({
          region: USER_POOL_REGION,
          accessKeyId: AWS_ACCESS_KEY_ID,
          secretAccessKey: AWS_SECRET_KEY
        });
        var cognitoidentityserviceprovider = new AWS.CognitoIdentityServiceProvider();
        cognitoidentityserviceprovider.listUsers(params, (err, data) => {
          if (err) {
            console.log(err);
            reject(err);
          } else {
            resolve(data);
            setUsers(data)
          }
        });
      });
    };
    getUsers();
  }, []);

  return users.map(user => {
    return (
      <ul>
        <li>{user.given_name}</li>
      </ul>
};

export default ListUsers;

One thing that I have noticed is that it doesn't seem to be setting state. Pretty sure that is because I'm doing it wrong. What I need to do is be able to map over the data that is returned as it is doing in the return statement. Any help would be greatly appreciated!

Answer 1

In this case, it does not seem like creating your own Promise was necessary, your hook will work just fine without it :

  useEffect(() => {

    var params = {
      UserPoolId: USER_POOL_ID,
      AttributesToGet: ['given_name']
    };

    AWS.config.update({
      region: USER_POOL_REGION,
      accessKeyId: AWS_ACCESS_KEY_ID,
      secretAccessKey: AWS_SECRET_KEY
    });

    var cognitoidentityserviceprovider = new AWS.CognitoIdentityServiceProvider();
    cognitoidentityserviceprovider.listUsers(params, (err, data) => {
      if (err) {
        console.log(err);
      } else {
        setUsers(data)
      }
    });

  }, []);

But the main problem seems to be coming from the JSX you return, as it cannot be an array of nodes.

In your case, you should return a ul tag and map your users within it like the following (don't forget to give them a unique key) :

  return (
    <ul>
      {users.map(user => <li key={user.given_name}>{user.given_name}</li>)}
    </ul>
  )