create topic component b00tc4mp#482

staff/judy-grayland/project/app/src/components/Topic.jsx

@@ -0,0 +1,7 @@
+function Topic(props) {
+  return <p>{props.topics}</p>
+}
+
+export default Topic
+
+// it receives topics array. i need to map over that array. declare object before function Topic. call it for example translation. make key value pairs in which the key is the english and the value the spanish equivalent.

staff/judy-grayland/project/app/src/components/index.js

@@ -1,5 +1,6 @@
 import Field from './Field'
 import Button from './Button'
 import Form from './Form'
+import Topic from './Topic'
 
-export { Field, Button, Form }
+export { Field, Button, Form, Topic }

staff/judy-grayland/project/app/src/pages/ResourceActivity.jsx

@@ -1,17 +1,17 @@
-import { Button } from '../components'
+import { Button, Topic } from '../components'
 
 function ResourceActivity(props) {
   return (
     <article className="resource-activity">
-      {/* We hardcode the type of resource because we already know what it is because this component is only rendered for this type of resource. If we write props.resourceType we get it from the database and it's in English */}
+      {/* We hardcode the type of resource because we already know what it is since this component is only rendered for this type of resource. If we write props.resourceType we get it from the database and it's in English */}
 
       <span>Actividad</span>
       <h2>{props.title}</h2>
 
       <img src={props.image}></img>
-      <p>{props.description} </p>
+      <p>{props.description}</p>
       <a>{props.link}</a>
-      <p>{props.topic}</p>
+      <Topic topics={props.topic} />
       <Button>Editar</Button>
       <Button>Eliminar</Button>
     </article>