0

Saludos estoy recién aprendiendo React y me topé con este error

cannot be called in a class component. React hooks must be called in a react function component or a custom react hook function

este es el código

  import React, {Component} from "react";

class ComponenteA extends Component{
    render(){
        return (
            <span>ComponenteA</span>
        )
    }
}
class ComponenteB extends Component{
    render(){
        return (
            <span>ComponenteB</span>
        )
    }
}

function useConditionalRendering (mostrarA) {
    if (mostrarA){
        return <ComponenteA/>
    }
    return <ComponenteB/>
    
}


export default class ConditionalSection extends Component {
    constructor(){
        super()
        this.state={mostrarA:true}
    }
    render (){
        return  (
            <div>
                <h4>Conditional Render</h4>
               {useConditionalRendering(this.state.mostrarA.mostrarA)}
            </div>
        )
    }
}

el error me sale en esta línea de código {useConditionalRendering(this.state.mostrarA.mostrarA)} les agradecería mucho su ayuda

6
  • Quiere decir que los hooks solo se pueden usar en componentes funcionales, no en componentes de clase como el tuyo
    – Suso
    el 6 jun. 2022 a las 20:59
  • como podría resolverlo porfavor?? el 6 jun. 2022 a las 21:00
  • Cambia a un componente funcional, es decir, la clase ConditionalSection trátala como componente en vez de ser una clase.
    – lsanchezo
    el 6 jun. 2022 a las 21:03
  • podrías añadir tu repuesta para saber, porque no entiendo mucho este tema el 6 jun. 2022 a las 21:07
  • Con cambiarle el nombre a la función por algo que no empiece por use quitabas el error. Ninguna respuesta es correcta. React utiliza la palabra reservada use al inicio de las funciones para nombrar los Hooks, y va a considerar cualquier función que comience con la palabra use como un hook. Como los hooks no pueden utilizarse en clases, pero React piensa que tu función es un hook, por eso te da el error. Cambia el nombre de la función a algo que no empiece con use y problema solucionado.
    – Jaime
    el 6 jun. 2022 a las 22:45

2 respuestas 2

1

Yo te recomiendo cambiar a componentes funcionales. Aún así si quieres renderizar un componente dependiendo de una condición tendría que ser algo así:

export default class ConditionalSection extends Component {
constructor(props){
    super(props)
    this.state={mostrarA:true}
}
render (){
    return  (
        <div>
            <h4>Conditional Render</h4>
           {this.state.mostrarA
              ? <ComponenteA />
              : <ComponenteB/ />
        </div>
    )
}
}

Ya después tienes que controlar mediante una función, las props o el componentDidUpdate, o componentDidMount el valor de mostrarA para que renderice uno u otro

3
  • y si la lógica la quisiera poner en una función como sería??? el 6 jun. 2022 a las 21:13
  • En la página en la que llamas a ConditionalSection, le puedes pasar una prop que sea mostrarA={true} o {false}. quedaría <ConditionalSection mostrarA={true} />. También cambiar la condición de renderizado para que en lugar de renderizar por la variable de estado, lo haga en función del valor de la prop, sería this.props.mostrarA
    – Suso
    el 6 jun. 2022 a las 21:17
  • Se podría hacer en este componente con una función pero no se que lógica quieres que tenga
    – Suso
    el 6 jun. 2022 a las 21:18
0

Tienes dos opciones, una dejarlo tal cual y colocar otro tipo de validación que no sea el `this.state.mostrarA.mostrarA, la otra opción es dejarlo en componente funcional (recomendado):

De esto:

export default class ConditionalSection extends Component {
    constructor(){
        super()
        this.state={mostrarA:true}
    }
    render (){
        return  (
            <div>
                <h4>Conditional Render</h4>
               {useConditionalRendering(this.state.mostrarA.mostrarA)}
            </div>
        )
    }
}

A esto:

const ConditionalSection = () => {
    constructor(){
        super()
        this.state={mostrarA:true}
    }
    render (){
        return  (
            <div>
                <h4>Conditional Render</h4>
               {useConditionalRendering(this.state.mostrarA.mostrarA)}
            </div>
        )
    }
}

export default ConditionalSection 

Si quieres dejarlo como clase en tu validación solo usa esto (no recomendado):

{useConditionalRendering(mostrarA)}

Lo mejor es usar componentes funcionales para evitar menos código; además de que facilita el entendimiento de tu código. Para lo único que deberías usar componentes como clases en lugar de componentes funcionales es cuando requieres más funciones de lo usual.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.