React Online Test

Consider the following components:

const SecurityContext = React.createContext({ username: "", permissions: [] });

const ControlsComponent = (props) => {
  return (
    <SecurityContext.Provider value={{ username: props.username }}>
      <LogoutWrapper></LogoutWrapper>
    </SecurityContext.Provider>
  );
};

const LogoutWrapper = (props) => {
  var context = React.useContext(SecurityContext);
  
  return (
    <div>
      <p>{context.username}</p>
      <button>Click here to logout</button>
    </div>
  );
};

Select all the correct statements if ControlsComponent is rendered with the username prop equal to "James".

(Select all acceptable answers.)

Finish the FocusableInput component so that the input element automatically receives focus on the first render.

The component should use React Hooks.

The Message component contains an anchor element and a paragraph below the anchor. Rendering of the paragraph should be toggled by clicking on the anchor element using the following logic:

• At the start, the paragraph should not be rendered.
• After a click, the paragraph should be rendered.
• After another click, the paragraph should not be rendered.

Finish the Message component by implementing this logic.