Estoy tratando de pasar una función como parámetro para un componente, sin embargo, no ve la función que paso como una función.
Aquí está la página (solo voy a proporcionar lo importante)
const Home = () => { const nav = useNavigate() const [userList, setUserList] = useState([]); const [loggedInUser, setLoggedInUser] = useState({}); const [currentChat, setCurrentChat] = useState(undefined); const [showMenu, setShowMenu] = useState(false); let navMenu const handleChatChange = (chat) => { setCurrentChat(chat); } return ( <div id='sidebar'> <div> <Userlist users={userList} switchChat={handleChatChange}/> </div> </div> )Aquí está el componente de reacción que proporciona el error.
const Userlist = ( props, switchChat ) => { const switchCurrentchat = (user) => { switchChat(user); } return ( <div> <div id='home-header'> <h1>DevsHelp</h1> </div> <div id='userlist'> {props.users.map((user) => { return ( <div key={user._id} className='user' onClick={() => switchCurrentchat(user)} > <h3>{user.username}</h3> </div> ) })} </div> </div> )}Cada vez que se llama a switchChat, devuelve un error que indica que "switchChat" no es una función.
Si hago un console.log (usuario) en lugar de switchChat (usuario), registra al usuario, por lo que la función funciona, sin embargo, simplemente no lo lee como una función.
Si alguien pudiera ayudarme, se lo agradecería mucho, gracias!
Los componentes de React reciben un objeto, comúnmente conocido como props.
Si envuelve los parámetros entre llaves, puede referirse a ellos por su nombre dentro del componente. Como esto:
const Userlist = ({ users, switchChat }) => { Si hace esto, necesitará referirse a los usuarios directamente dentro del componente. Así que ya no hay props.users .
También puedes referirte a ellos a través del objeto props:
const Userlist = (props) => { // props.users and props.switchChat are available here }