IdeaBox
-Hi!
-IdeaBox
+Hi!
+ tag and pass some data as a prop when rendering our Ideas component.
```jsx
-// App.js
+// App.jsx
// ...
return(
Hi!IdeaBox
-
` inviting users to add some ideas.*
+
### In plain JS, what could this conditional look like?
```javascript
-if (!data.length) {
+if (!ideas.length) {
// return an h2 saying to add some ideas
}
```
-We can use curly braces to inject JS into our JSX. However, we need whatever is inside of our curlies to _evaluate_ to the HTML we want rendered, so we'll use some syntax like this:
+We can use curly braces to inject JS into our JSX. However, we need whatever is inside of our curlies to _evaluate_ to the HTML we want rendered, so we'll use React's conditional rendering syntax like this:
```jsx
-// App.js
+// App.jsx
return (
@@ -720,13 +723,15 @@ We can use curly braces to inject JS into our JSX. However, we need whatever is
What does the operator return?
-The code above says that, if the expression on the left side of the `&&` is true, return the expression on the right side. So if there are no ideas in state, return our h2!
+The code above says that, if the expression on the left side of the `&&` is true, return the expression on the right side. So if there are no ideas in state, return (aka render) our h2!
-## Form.js
+Go ahead and pass your dummyIdeas back into your useState hook. Later, when we set up the ability to delete ideas, we should see our `` anytime there are no ideas in the ideas array in state.
+
+## Form.jsx
Let's move on to our Form component. We're going to create what is known as a controlled form.
-Create the Form component files: `$ touch src/Form.js src/Form.css`
+In the Form directory we created earlier, create the `Form.jsx` and `Form.css` files.
```css
/* Form.css */
@@ -747,7 +752,7 @@ input, button {
Our Form will start like this:
```jsx
-// Form.js
+// Form.jsx
import { useState } from 'react';
import './Form.css';
@@ -781,25 +786,26 @@ export default Form;
```
Now that we have our Form files started, we can connect our Form to our App component so it will render.
-First, import the Form in App.js.
+First, import the Form in App.jsx.
```jsx
-import Form from './Form';
+import Form from '../Form/Form';
```
Then, render the Form in App's return.
```jsx
- return(
-
+ return (
+
IdeaBox
+ {!ideas.length && No ideas yet -- add some!
}
- )
+ )
```
But we also need to write some functions. Let's go back to our Form and make sure that when we type into our inputs, they update the Form's state.
```jsx
-// Form.js
+// Form.jsx
return (
- )
+
+ return (
+
+ )
+}
+
+export default Form;
+
```
### Deleting a Card
@@ -909,11 +931,11 @@ Now that you know how to use a function and props to allow a different component
First, write the App function to delete an idea from state and pass it to the Ideas component:
```jsx
-// App.js
+// App.jsx
import './App.css';
-import Form from './Form';
-import Ideas from './Ideas';
+import Ideas from '../Ideas/Ideas';
+import Form from '../Form/Form';
import { useState } from 'react'
function App(){
@@ -936,7 +958,7 @@ function App(){
return(
IdeaBox
- Hi!
+ {!ideas.length && No ideas yet -- add some!
}
@@ -951,7 +973,8 @@ Second, pass the `deleteIdea` function to each Card that the Ideas component cre
```jsx
import './Ideas.css';
-import Card from "./Card"
+import Card from '../Card/Card';
+
function Ideas({ ideas, deleteIdea }){
const ideaCards = ideas.map(idea => {
` anytime there are no ideas in the ideas array in state.
+
+## Form.jsx
Let's move on to our Form component. We're going to create what is known as a controlled form.
-Create the Form component files: `$ touch src/Form.js src/Form.css`
+In the Form directory we created earlier, create the `Form.jsx` and `Form.css` files.
```css
/* Form.css */
@@ -747,7 +752,7 @@ input, button {
Our Form will start like this:
```jsx
-// Form.js
+// Form.jsx
import { useState } from 'react';
import './Form.css';
@@ -781,25 +786,26 @@ export default Form;
```
Now that we have our Form files started, we can connect our Form to our App component so it will render.
-First, import the Form in App.js.
+First, import the Form in App.jsx.
```jsx
-import Form from './Form';
+import Form from '../Form/Form';
```
Then, render the Form in App's return.
```jsx
- return(
-
+ return (
+
IdeaBox
+ {!ideas.length && No ideas yet -- add some!
}
- )
+ )
```
But we also need to write some functions. Let's go back to our Form and make sure that when we type into our inputs, they update the Form's state.
```jsx
-// Form.js
+// Form.jsx
return (
- )
+
+ return (
+
+ )
+}
+
+export default Form;
+
```
### Deleting a Card
@@ -909,11 +931,11 @@ Now that you know how to use a function and props to allow a different component
First, write the App function to delete an idea from state and pass it to the Ideas component:
```jsx
-// App.js
+// App.jsx
import './App.css';
-import Form from './Form';
-import Ideas from './Ideas';
+import Ideas from '../Ideas/Ideas';
+import Form from '../Form/Form';
import { useState } from 'react'
function App(){
@@ -936,7 +958,7 @@ function App(){
return(
IdeaBox
- Hi!
+ {!ideas.length && No ideas yet -- add some!
}
@@ -951,7 +973,8 @@ Second, pass the `deleteIdea` function to each Card that the Ideas component cre
```jsx
import './Ideas.css';
-import Card from "./Card"
+import Card from '../Card/Card';
+
function Ideas({ ideas, deleteIdea }){
const ideaCards = ideas.map(idea => {
IdeaBox
+ {!ideas.length &&No ideas yet -- add some!
}IdeaBox
-Hi!
+ {!ideas.length &&