Skip to content
  • Learning paths
  • Challenges
  • Solutions
  • Articles
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted over 1 year ago

FAQ Component - React | TailwindCSS | MaterialUI

react, tailwind-css, material-ui
elliezub•80
@elliezub
A solution to the FAQ accordion card challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


Creating this project I decided to try out materialUI to make the accordion, it turned out to be pretty useful!

Feedback is welcome.

Code
Select a file

Please log in to post a comment

Log in with GitHub

Community feedback

  • Yazdun•1,310
    @Yazdun
    Posted over 1 year ago

    This is looking great, well done!

    I have a suggestion for you, instead of hardcoding accordion data, you can store all the accordion data inside an array and map through the array inside your react component.

    This way you won't need to repeat the same code with different title and description, it also will be so much easier to update the data or change the JSX since the pattern is repeated only once.

    I've already opened a PR which resolves this issue, make sure to check it out.

    Other than that, it's looking fantastic, keep up the incredible work!

    Marked as helpful
  • BrunoMoleta•700
    @brunomoleta
    Posted over 1 year ago

    Hi Ellie,

    It's a valuable call to make your React components smaller. From what I checked out you used only an Accordion component (besides the main.jsx)

    For example, inside the Accordion you can do

            return (<>
    {data.map((item) => (
            <DetailsItem
                ...
            />
          ))}
    

    And put all that code in a separate component. It might seem unnecessary at first glance, but it makes it much easier for someone else to read your code.

    The code may be separate so that the app.jsx becomes something similar to:

        <>
          <div className="stack-x-large grid grid-row-1-auto">
            <Container />
          </div>
        </>
    

    I suggest you look at how the files are managed in my solution.

    Great effort, and keep up the hustle.

    Best regards from Brazil 🇧🇷 :)

    Marked as helpful

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub