<NoteCard/> Component
Each note will be rendered out as it's own component.
Create component
Create a component for a note card: src/components/NoteCard.jsx
NoteCard.jsx
const NoteCard = ({ note }) => {
const body = JSON.parse(note.body);
return <div>{body}</div>;
};Because a note body will be stringified text, we will need to parse the body attribute before rendering it out.
Render notes
Using our newley created NoteCard component, we can now access our fake note data to map through this array of objects and return each note.
NoteCards.jsx
import { fakeData as notes } from "../assets/fakeData.js";
import NoteCard from "../components/NoteCard";
const NotesPage = () => {
return (
<div>
{notes.map((note) => (
<NoteCard note={note} key={note.$id} />
))}
</div>
);
};Add basic card color styling
Let's add some styling to our notes by adding the following to our index.css file.
index.css
.card {
width: 400px;
border-radius: 5px;
cursor: pointer;
box-shadow: 0 1px 1px hsl(0deg 0% 0% / 0.075), 0 2px 2px hsl(0deg 0% 0% /
0.075), 0 4px 4px hsl(0deg 0% 0% / 0.075), 0 8px 8px hsl(0deg
0% 0% / 0.075), 0 16px 16px hsl(0deg 0% 0% / 0.075);
}We'll use the colors attribute to set our note colors directly within our component, and also add the .card className.
NoteCard.jsx
const NoteCard = ({ note }) => {
let position = JSON.parse(note.position);
const colors = JSON.parse(note.colors);
const body = JSON.parse(note.body);
return (
<div
className="card"
style={{
backgroundColor: colors.colorBody,
}}
>
{body}
</div>
);
};