when I run my code, I get the following error:
Invalid shorthand property initializer.
function DisplyayNote() {
let noteId = -1;
const [isOpen, setIsOpen] = useState(false);
return isOpen ? (
{noteId = 0 ? <div className="backComponent">
<div className="noteOpen">
<div>C'est ouvert</div>
<button onClick={() => setIsOpen(false)}>Fermer</button>
</div>
</div> : null}
) : (
<>
<div>C'est fermé</div>
<button onClick={() => setIsOpen(true)}>Ouvrir</button>
</>
);
}
Would you have an idea to solve this problem?
First of all, there is no need to add {. Second, change note_id=0 to note_id==0 or note_id===0 because note_id=0 is not a boolean expression. I have used the code snippet below to test it and its working fine.
function DisplyayNote() {
let noteId = 0;
const [isOpen, setIsOpen] = useState(false);
return isOpen ? (
noteId == 0 ? <div className="backComponent">
< div className="noteOpen" >
<div>C'est ouvert</div>
<button onClick={() => setIsOpen(false)}>Fermer</button>
</div >
</div > : null
) : (
<>
<div>C'est fermé</div>
<button onClick={() => setIsOpen(true)}>Ouvrir</button>
</>
);
};
Please change noteId = 0 to noteId === 0
In short, it was enough to put everything in a container:
return isOpen ? (
<>
{noteId >= 0 ?
<div className="backComponent">
<div className="noteOpen">
<div>C'est ouvert</div>
<button onClick={() => setIsOpen(false)}>Fermer</button>
</div>
</div> : null}
</>
) : (
<>
<div>C'est fermé</div>
<button onClick={() => setIsOpen(true)}>Ouvrir</button>
</>
);