Erreur: appel crochet non valide. Les crochets ne peuvent être appelés à l'intérieur du corps d'un composant de fonction. (P / Reactstrap)

dimas Hermanto:

Les gars je sais que cette erreur a demandé à plusieurs reprises ici, mais je reste vraiment confus à ce sujet. Donc, j'ai essayé d'appeler le composant Navbar ci-dessous,

import React, { useState } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import {Collapse, Navbar, NavbarToggler, NavbarBrand, Nav, NavItem, NavLink} from 'reactstrap';

const [collapsed, setCollapsed] = useState(true);
const toggleNavbar = () => setCollapsed(!collapsed);


var mainNavbar1= () => {

return(
    <div className = "mt-2">
        <Navbar color="faded" light>
        <NavbarBrand href="/" className="mr-auto">Welcome!</NavbarBrand>

        <NavbarToggler onClick={toggleNavbar} className="mr-2" />

        <Collapse isOpen={!collapsed} navbar>
            <Nav navbar>
            <NavItem>
                <NavLink href="/components/">Home</NavLink>
            </NavItem>
            <NavItem>
                <NavLink href="/components/">About</NavLink>
            </NavItem>
            <NavItem>
                <NavLink href="/components/">Contact Me</NavLink>
            </NavItem>
            <NavItem>
                <NavLink href="/components/">Components</NavLink>
            </NavItem>
            <NavItem>
                <NavLink href="https://github.com/reactstrap/reactstrap">GitHub</NavLink>
            </NavItem>
            </Nav>
        </Collapse>

        </Navbar>
    </div>
);
}

export default mainNavbar1;

A l'intérieur du composant principal « App »,

import React, { useState } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import { Alert, Collapse, Navbar, NavbarToggler, NavbarBrand, Nav, NavItem, NavLink , Jumbotron,                 
Button, Container, Row, Col} from 'reactstrap';
import {mainNavbar1} from './mainNavbar';

var underDevelopmentAlert = () => {
   alert("Page under development!!");
}


var App = () => {

   return (
    <mainNavbar1/>
   )

}

Et je suis l'erreur ci-dessus. J'ai déjà lu les règles de crochets et encore eu cela. Je suis sûr que je suis suis déjà tout correctement .. Suis-je manque quelque chose? (Le composant Navbar est copié directement depuis le site officiel Reactstrap)

Jayce444:

Tout d'abord, les composants React doivent commencer par une lettre majuscule, sans exception.

D'autre part, vos crochets ne sont pas à l'intérieur du composant, ils sont seulement à l'intérieur du fichier que votre composant est. Vous devez les mettre réellement dans la définition de composant. Ainsi:

const MainNavbar1 = () => {

    const [collapsed, setCollapsed] = useState(true);
    const toggleNavbar = () => setCollapsed(!collapsed);

    return(...)
}