React Online Test

A megastore offers three types of discounts. The store needs a way to calculate these discounts quickly.

Implement the PriceCalculator component which should take the total weight of the shopping cart, the total price, and the discount type. It should display the final discounted price based on the discount schemes as the input changes.

The discounts are shown in the promotional video below:

(Open full-size video in a new tab)

For example, when the discount type is weight, the weight of the cart is 12 and the price is 100, the discounted price is 82, as show in the screenshot below:

An RPG game lets you assign points to the strength and speed attributes of your character. The video below shows how 5 points are supposed to be assigned.

The available points are passed in the totalPoints prop.

Complete the CharacterPoints component so that the UI behaves as shown in the video. When initialized, all points should be available, and both attributes should start at 0.

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.

The TextInput component renders an input element in the DOM and accepts a ref that is forwarded to that input element. Finish the FocusableInput component:

• The component should accept a focused prop.
• When the focused prop is changed from false to true, the input should receive the focus.
• If on mounting the focused prop is true, the input should receive the focus.

This application should allow the user to update their username by inputting a custom value and clicking the button.

The Username component is finished and should not be changed, but the App component is missing parts. Finish the App component so that the Username component displays the inputted text when the button is clicked.

For example, if the user inputs a new username of "John Doe" and clicks the button, App's div element should look like this:

<div><button>Change Username</button><input type="text"><h1>John Doe</h1></div>

An image gallery is a set of images with corresponding remove buttons. This is the HTML code for a gallery with two images:

<div>
  <div class="image">
    <img src="https://tinyurl.com/im-gal-1st">
    <button class="remove">X</button>
  </div>
  <div class="image">
    <img src="https://tinyurl.com/im-gal-2nd">
    <button class="remove">X</button>
  </div>
</div>

Implement the ImageGallery component that accepts a links prop and renders the gallery described above so that the first item in the links prop is the src attribute of the first image in the gallery. It should also implement the following logic: When the button is clicked, the image that is in the same div as the button should be removed from the gallery.

For example, after the first image has been removed from the gallery above, it's HTML code should look like this:

<div>
  <div class="image">
    <img src="https://tinyurl.com/im-gal-2nd">
    <button class="remove">X</button>
  </div>
</div>

Finish the FocusableInput component so that the input element automatically receives focus on the first render if the shouldFocus prop is true.

You have a GroceryApp component, which receives a list of products, each one with name and votes. The app should render an unordered list, with a list item for each product. Products can be upvoted or downvoted.

By appropriately using React state and props, implement the upvote/downvote logic. Keep the state in the topmost component, while the Product component should accept props.

For example, passing the following array as products prop to GroceryApp [{ name: "Oranges", votes: 0 }, { name: "Bananas", votes: 0 }] and clicking the '+' button next to the Oranges should result in HTML like:

<div id="root">
  <ul>
    <li>
      <span>Oranges</span> - <span>votes: 1</span><button>+</button> <button>-</button>
    </li>
    <li>
      <span>Bananas</span> - <span>votes: 0</span><button>+</button> <button>-</button>
    </li>
  </ul>
</div>

Write a TodoList component that expects an items prop which is a list of objects, each with text and done properties.

TodoList also accepts an onItemClick function prop, which should be called when a user clicks an item in the list, if the item is not marked as done. Otherwise, the onItemClick should not be called and the click event itself should not be propagated further. The function should be called with the item object from the items list as the first parameter and the event as the second parameter.

Consider the following React 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".