Home>IT Tests>Questions>Fix the following React code:

Question from the React ⚛️ test

Fix the following React code:

Medium

What is(are) the problem(s) in this code?

function SomeComponent(props) {
  if (props.condition) {
    props.condition = !props.condition;
  } else{
    return(
     <p>Hello,</p>
     <p>I am a React.js developer</p>
    )
  }
}

Author: Vincent CotroStatus: Published(Update)Question passed 944 times

Edit

Community Evaluations

Auteur anonyme

30/08/2024

can anyone explain this i don't understand this question

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.