### Note
@@ -376,10 +369,10 @@ Will this Ideas component need to have state? What do you think?
Since the Ideas component will just be rendering Card components, it will not need to have its own state.
-let's create a function called Ideas that returns an h2 that reads "Ideas go here!"
+Let's create a function called Ideas that returns an h2 that reads "Ideas go here!"
```jsx
-// Ideas.js
+// Ideas.jsx
import './Ideas.css';
@@ -392,14 +385,14 @@ function Ideas(){
export default Ideas;
```
-Then, back in our `App.js`, we can import our shiny new Ideas component and add it to our render!
+Then, back in our `App.jsx`, we can import our shiny new Ideas component and add it to our return so it will render!
```jsx
-// App.js
+// App.jsx
-import './App.css';
-import Ideas from './Ideas';
import { useState } from 'react'
+import './App.css';
+import Ideas from '../Ideas/Ideas'
function App(){
const dummyIdeas = [
@@ -438,25 +431,24 @@ When we pass props down to a child component, it comes through as a simple JavaS
Let's start with an example, just to keep things simple. For now, since our Ideas component just contains an h2, let's make that h2 say something different than "Ideas go here!"
-In our App component, let's render the Ideas component by adding it to our return.
+In our App component's return statement, let's get rid of our tag and pass some data as a prop when rendering our Ideas component.
```jsx
-// App.js
+// App.jsx
// ...
return(
IdeaBox
- Hi!
)
-
+// ....
```
-Now, let's adjust our Ideas component.
+Now, let's adjust our Ideas component so it can receive and use that data coming in as props.
```jsx
-// Ideas.js
+// Ideas.jsx
function Ideas(props){
@@ -468,18 +460,18 @@ function Ideas(props){
What are those curly brackets doing? In JSX, whenever we're writing something that is JavaScript (aka "not HTML"), we have to wrap it in curly brackets. In this case, "name" acts like a variable. It's not a string that reads "name" - it's a placeholder that represents the value of the property (in this case, "Travis")! Because it's a variable, we have to surround it in curly brackets to tell the JSX to treat the contents like JavaScript.
-In your browser, you should see "Hello, Travis!" In `App.js`, add another Ideas component to the `App.js` `return()` , but pass in a different name. What do you see in the browser? Try creating new props to use!
+In your browser, you should see "Hello, Travis!" In `App.jsx`, add another Ideas component to the `App.jsx` `return()` , but pass in a different name. What do you see in the browser? Try creating new props to use!
Okay, so just WHAT exactly is going on here?
**props** is the name of an object that contains key-value pairs. From our above example, the key is "name", and the value is "Travis". So, in our Ideas component, we can access the value by writing `props.name` (which gives us a string of "Travis"). This is the same dot notation we learned in Mods 1 and 2 to access data stored in objects.
-If, in the `return` of our App component, we called the property "potato" instead of "name", we would have to access it by (inside the Ideas component) writing `props.potato`.
+If, in the `return` of our App component, we called the property "potato" instead of "name", we would have to access it by (inside the Ideas component) writing `props.potato`. This is the same dot notation we learned in Mod 2 to access data stored in objects.
We can even destructure the props object, because it's just a regular object!
```jsx
-// Ideas.js
+// Ideas.jsx
function Ideas(props){
const { name } = props;
@@ -495,7 +487,7 @@ In _this_ example, destructuring is a bit over-engineered, yes. However, we'll s
And here's YET ANOTHER super-fancy way to destructure:
```jsx
-// Ideas.js
+// Ideas.jsx
function Ideas({ name }){
return (
@@ -504,7 +496,7 @@ function Ideas({ name }){
}
```
-We can destructure props ON THE WAY IN. Whoa! It's accomplishing the same thing as destructuring on a separate line, like in the previous example.
+We can destructure props ON THE WAY IN. Whoa! It's accomplishing the same thing as destructuring on a separate line, like in the previous example. Be aware of destructuring but don't stress it at this time.
@@ -519,10 +511,10 @@ All right. We don't actually want to render an h2 in our Ideas component. We wan
Let's create a Card component to use.
-Create your files: `$ touch src/Card.js src/Card.css`
+In the `Card` directory we created earlier, create the `Card.jsx` and `Card.css` files.
```jsx
-// Card.js
+// Card.jsx
import './Card.css';
@@ -541,10 +533,10 @@ export default Card;
Then, in your Ideas component, let's just try to get these hooked up properly.
```jsx
-// Ideas.js
+// Ideas.jsx
-import Card from './Card';
+import Card from '../Card/Card';
import './Ideas.css';
function Ideas(props){
@@ -594,7 +586,7 @@ Okay! Hopefully your app looks like this:
All right, friends. Let's get to passing some PROPS! Let's go all the way back to our App component and pass our list of ideas to the Ideas container component, so that it can then create Card components out of each individual idea.
```jsx
-// App.js
+// App.jsx
return(
@@ -612,7 +604,9 @@ Go look at the Ideas component in your React dev tools in the browser. You shoul
We now want to iterate through our array and create a Card component, passing it the information it needs to display the proper information!
```js
-// Ideas.js
+// Ideas.jsx
+import Card from '../Card/Card';
+import './Ideas.css';
function Ideas({ ideas }){
@@ -633,6 +627,9 @@ function Ideas({ ideas }){