--- myst: html_meta: "description": "Refactor the app.js and create a new component so that we can use the markup." "property=og:description": "Refactor the app.js and create a new component so that we can use the markup." "property=og:title": "Convert To A Reusable Component" "keywords": "Plone, trainings, SEO, React, component, exercise, solution" --- (reusable-component-label)= # Convert To A Reusable Component ## Create A Reusable component To reuse the markup of a FAQ item, we will split up the code. The app component will contain just the data of the FAQ item and will render a newly created subcomponent called `FaqItem`. The data is passed to the subcomponent using properties. In the `FaqItem` component, you will have access to the properties with `props.question`. The {file}`App.js` code will be changed to: ```{code-block} jsx :emphasize-lines: 2,7-27 :linenos: true import "./App.css"; import FaqItem from "./components/FaqItem"; function App() { return (
+
+ assists with development funding and coordination of funding for
+ large feature implementations. In this way, our role is similar to
+ the role of the Apache Software Foundation and its relationship with
+ the Apache Project."
+ />
+ Why does Plone need a Foundation?
-
{props.answer}
{props.answer}