Skip to content

Instantly share code, notes, and snippets.

@codecademydev

codecademydev/App.js Secret

Created April 19, 2023 14:00
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save codecademydev/dee3eec3400bd479fc095090cd9763ad to your computer and use it in GitHub Desktop.
Save codecademydev/dee3eec3400bd479fc095090cd9763ad to your computer and use it in GitHub Desktop.
Download ZIP
Codecademy export
Raw
App.js
import React from "react";
import { comments } from "./commentData";
import Card from "./Card";
export default function App() {
return comments.map((comment) => <Card commentObject={comment} />);
}
Raw
Body.js
import React from 'react';
export default function Body(props) {
return <p>{props.comment}</p>;
}
Raw
Card.js
import React from 'react';
import Header fronm './Header';
import Body from './Body';
export default function Card(props) {
return (
<div>
<Header profileImg={props.commentObject.username} username={props.commentObject.username} />
<Body comment={props.commentObject.comment} />
</div>
);
}
Raw
commentData.js
export const comments = [
{
profileImg: 'https://images.unsplash.com/photo-1609992556706-14a7056ea745?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1287&q=80',
username: 'ScrungeCat',
comment: 'My favorite types of cats are slightly weird looking ones!'
},
{
profileImg: 'https://images.unsplash.com/photo-1615751072497-5f5169febe17?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1335&q=80',
username: 'ChewToy',
comment: 'I don\'t like cats at all.'
},
{
profileImg: 'https://images.unsplash.com/photo-1563482776068-4dac10f9373d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80',
username: 'BuryHeadInSand',
comment: 'Wild ostriches make the best pets.'
}
]
Raw
Header.js
import React from 'react';
export default function Header(props) {
return (
<div>
<img src={props.profileImg} />
<h1>{props.username}</h1>
</div>
);
}
Raw
index.js
import React from 'react';
import {createRoot} from 'react-dom/client';
import App from './App';
createRoot(document.getElementById('app')).render(<App />);
@sadramanouch
Copy link

Bro, does this work for you?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment