You need to create folders: src/containers/Words/Word, src/containers/Words/Word/Details, src/containers/Words/Word/Option.
In each bottom, you need index.js file to create the appropriate components.
Let’s start with the Option component. It must return the Text element.
If the detailsKey property is not equal to examples or defs:

  • element styles: fontSize - 14, color - colors.black, fontFamily - RobotoRegular, textDecorationLine: underline;
  • internal text - the option property of the component;
  • at the end of the internal test , , if the lastOption property does not equal true.

In another case, the display logic will be somewhat different.
To do this, in the Option’s folder create the helpers.js file and export it from the optionTransform function.
This function takes two arguments: strings option and word. option must be broken into an array.
The partition should be in such a way that every entry of the word in the option was separate item.
After you need every word entry in this array wrap the element into the Text element with fontFamily - RobotoBold

If the DetailsKey property More Examples Or Defs:

  • element styles: fontSize - 14, color - colors.black, fontFamily - RobotoRegular;
  • internal text - the result of calling optionTransform with the option and word properties of the component;
  • before the internal text you need to add - .

This task is part of the Full-Stack JavaScript Course .
If you have any issues with it, you can ask for community help below the post.
Feel free to help others if you’ve already solved the task.