Design comparison
Solution retrospective
I used react prop-types library to typechecking props and wanted two element to be optional so when i don't send props to it i wanted it to not show in the page, it didn't show but it was still there in the footer links (the first and second list contains 4 links and the third and fourth only contains 3 links) is there a way to make it not render in the html ? any feedback or answer is welcome
Community feedback
- @fazzaamiarsoPosted about 2 years ago
Hi Noha, Nice solution! to answer your question, prop types actually just do typechecking and doesn't affect rendering. You can do a conditional rendering using ternary operator.
//Render if link4 exists, else null {this.props.link4 ? <li className="pb-2"> <a href="#test" className="text-decoration-none text-dark"> {this.props.link4} </a> </li> : null}
I hope it helps! Cheers
Marked as helpful0
Please log in to post a comment
Log in with GitHubJoin 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