Question du test React ⚛️

Corrigez le code React suivant:

Intermédiaire

Quel(s) est(sont) le(s) problème(s) dans ce code ?

function SomeComponent(props) {
  if (props.condition) {
    props.condition = !props.condition;
  } else {
    return (
      <p>Bonjour,</p>
      <p>Je suis développeur React.js</p>
    )
  }
}
Auteur: Vincent CotroStatut : Publiée(Mise à jour)Question passée 898 fois
Modifier
2
Évaluations de la communauté
developer avatar
Auteur anonyme
30/08/2024
can anyone explain this i don't understand this question
developer avatar
Omar EL MANSSOURI
03/09/2024
Problems Explained: 1. "Props are modified": Problem: The code changes props.condition directly with props.condition = !props.condition. In React, you should never modify props directly because they are meant to be read-only. Props should be set by the parent component and should not be changed within the child component. 2. "The function does not return Virtual DOM if props.condition is true": Problem: If props.condition is true, the code modifies the condition but does not return anything. React components must always return something (either JSX or null). If nothing is returned, the component won’t render anything, which is problematic. 3. "The Virtual DOM returned does not have a root element": Problem: When props.condition is false, the component returns two adjacent <p> elements without a single root container. In JSX, you must wrap multiple elements in a single root element like a <div> or a React fragment (<>...</>). Without this, the code is invalid. 4. "Without declaring PropTypes, you cannot use props.condition and the code throws an error": This is not correct. PropTypes are used to validate the types of props but are not required for the code to work. The absence of PropTypes won’t cause an error in this case.