FAQ accordion

Community feedback

• 

  P

  Hogymess•270

  @jull20

  Posted 20 days ago

  I'm not a very experienced react developer, but I'll try to convey my vision of the situation.

  1. I don't really like the implementation of the FaqListItem component. The component approach assumes the possibility of reusing already written code, that is, we must select the most repetitive element and create a component from it. If we look at the design, we can see the list. Each list item contains a question, a button to expand the list item and the answer to the question, and all this is repeated 4 times. From this we can conclude that the component should return markup for the question, button, and answer. Based on all the above, the search for faq Data can be transferred to the return function of the App, there is already a ul tag there. And in FaqListItem, leave only the li return with all the necessary contents.
  2. If you imagine that you have created all the components of the list in the ul tag using a map, then to implement a logic where one question can be opened at one time, it is enough to use useState with indexes. There is an example on this topic in the React documentation.(https://react.dev/learn/sharing-state-between-components , step 3 ). You can add a field with an index to your json, which will make it a little easier.
  3. I can't give you any advice about using the motion library, I haven't used it. But before you start animating, you need to make it work.

  Good luck! You'll do well.

  00