FSD Quiz-2

Which one is a correct way of sending the value 'John' via the 'firstname' property to the Person component?

• root.render(<Person firstname='John' />);

• root.render(<Person props(firstname='John') />);

• root.render(Person(firstname='John'));

Which is a correct way of receiving, and using a prop named firstname, in a function class?

• function Person(firstname) {
      return <h2>My name is { firstname }!</h2>;
  }

• function Person(props) {
      return <h2>My name is { props.firstname }!</h2>;
  }

• Both of the above is correct

In React, which is a correct way of adding a mouseover event to trigger a function called 'run_now'?

• <div onmouseover='run_now()'>Lorum Ipsum</div>

• <div onMouseover='run_now'>Lorum Ipsum</div>

• <div onMouseover={run_now}>Lorum Ipsum</div>

Which one of these two code blocks is a correct way of adding a conditional statement in React?

• function Glass() {
      return (
          <>
              {5 > 2 && <h2>Hello</h2> }
          </>
      );
  }

• function Glass() {
      return (
          <>
              {5 > 2 &&} <h2>Hello</h2>
          </>
      );
  }

Consider the following code:function Family() {

    const names = ['Jane', 'John', 'Mike'];

    return (

        <>

            <ul>

                {names.map((x) => <li>{x}</li>)}

            </ul>

        </>

    );

What will be the return value?

• Jane

         John

         Mike

• Jane

• Jane

        Jane

         Jane

Complete this statement to include a click event handler.

k Me!</button>

 }>Click Me!</button>

<button _________={handle} <click me></button>

Add the attribute that allows React to keep track of elements in lists.

function GroceryList() {

  const items = [

    {id: 1, name: 'bread'},

    {id: 2, name: 'milk'},

    {id: 3, name: 'eggs'}

  ];

 

  return (

    <>

      <h1>Grocery List</h1>

      <ul>

        {items.map((item) => <li _____ ={item.id}>{item.name}</li>)}

      </ul>

    </>

  );

}

 

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<GroceryList />);

Complete the code to create a controlled input:

 

function Form() {

  const [x, setX] = useState('');

  return (

    <input

      value={_______}

      onChange={e => ________(e.target.value)}

    />

  );

}

• x,set X

• y,setY

• any

• none

 

What makes an input a 'controlled component' in React?

• Using a ref to access the DOM element

• Using the defaultValue prop

• Using React state to control its value

• Using the onSubmit event handler

Complete the code to create a controlled textarea:

 

function TextArea() {

  const [text, setText] = useState("");

 

  return (

    <textarea

    ______  ={text}

     _______ ={e => setText(e.target.value)}

    />

  );

}

• input,setText

• value,onChange

• input,onChange

• type,setText