Hay algunos problemas en el enlace proporcionado.

• Está tratando de mapear a través del estado, donde el valor inicial es una cadena, en su lugar debería ser una matriz.
• Los nombres de las funciones de establecimiento deben ser significativos
• No tiene clave, que es obligatoria en el método de mapa. Vea el ejemplo de trabajo de su código, que cargué en CodeSandbox.

 import React from "react"; import styles from "./CollectionUser.module.css"; const CollectionUser = (props) => { return ( <ul className={styles.ulCollect}> {props.users.map((Items, index) => ( <li key={index}> {Items.name} ({Items.age} years old) </li> ))} </ul> ); }; export default CollectionUser;

Aplicación.js

 import React, { useState } from "react"; import AddUser from "./Components/AddUser/AddUser"; import styles from "./App.module.css"; import CollectionUser from "./Components/CollectionUser/CollectionUser"; function App() { const [users, setUsers] = useState([]); const enteredData = (uName, uAge) => { setUsers((prevUserlist) => { return [ ...prevUserlist, { id: Math.random().toString(), name: uName, age: uAge }, ]; }); }; console.log(users); return ( <> <div className={styles.container}> <AddUser info={enteredData} /> </div> <CollectionUser users={users} /> </> ); } export default App;

El error que recibe es muy útil: sugiere que sus props.users no son una matriz. Todo lo que necesita hacer es establecer el estado inicial en una matriz vacía en App.js, por lo que la línea a continuación

 const [state, setSatate] = useState('');

se convertiría

 const [state, setSatate] = useState([]);

De esta manera, reaccionar podrá llamar a la función .map en props.users .