Say your application has dynamic forms like this:

import React from "react";
import ReactDOM from "react-dom";
import Cart from "./Cart";

import "./styles.css";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      Items: [
        {
          name: "item1",
          description: "item1",
          group: "groupA",
          dtype: "str"
        },
        {
          name: "item2",
          description: "item2",
          group: "groupA",
          dtype: "str"
        },
        {
          name: "item3",
          description: "item3",
          group: "groupB",
          dtype: "str"
        },
        {
          name: "item4",
          description: "item4",
          group: "groupB",
          dtype: "str"
        }
      ],
      itemvalues: [{}]
    };
    this.onChangeText = this.onChangeText.bind(this);
    this.handleReset = this.handleReset.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.findFieldIndex = this.findFieldIndex.bind(this);
    this.trimText = this.trimText.bind(this);
  }

  onChangeText = e => {
    const valuesCopy = [...this.state.itemvalues];
    //debugger;

    // get data-group value
    const itemvalue = e.target.dataset.group;

    if (!valuesCopy[0][itemvalue]) {
      valuesCopy[0][itemvalue] = [];
    }

    const itemvalues = valuesCopy[0][itemvalue];
    const index = this.findFieldIndex(itemvalues, e.target.name);

    if (index < 0) {
      valuesCopy[0][itemvalue] = [
        ...itemvalues,
        { [e.target.name]: e.target.value.split(",").map(this.trimText) }
      ];
    } else {
      // update the value
      valuesCopy[0][itemvalue][index][e.target.name] = e.target.value
        .split(",")
        .map(this.trimText);
    }

    // console.log(itemsCopy);

    this.setState({ itemvalues: valuesCopy });
  };
  findFieldIndex = (array, name) => {
    return array.findIndex(item => item[name] !== undefined);
  };
  trimText(str) {
    return str.trim();
  }

  handleReset = () => {
    this.setState({
      itemvalues: [{}]
    });
  };

  handleSubmit = () => {
    console.log(this.state.itemvalues);
  };

  render() {
    return (
      <Cart
        Items={this.state.Items}
        handleSubmit={this.handleSubmit}
        handleReset={this.handleReset}
        onChangeText={this.onChangeText}
      />
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

import React from "react";
import Form from "./Form";

const Cart = props => {
  return (
    <div>
      <Form Items={props.Items} onChangeText={props.onChangeText} />

      <button onClick={props.handleSubmit}>Submit</button>
      <button onClick={props.handleReset}>Reset</button>
    </div>
  );
};

export default Cart;

import React from "react";

const Form = props => {
  return (
    <div>
      {props.Items.map((item, index) => (
        <input
          name={item.name}
          placeholder={item.description}
          data-type={item.dtype}
          data-group={item.group}
          onChange={e => props.onChangeText(e)}
          key={index}
        />
      ))}
    </div>
  );
};
export default Form;

And simple input boxes are rendered to the page:

When a user enters text into one of the input boxes, it's saved to the application state in groups like this:

Itemvalues:
  0:
    groupA: 
            item1: itemvalue1
            item2: itemvalue2
    groupB: 
            item3: itemvalue3
            item4: itemvalue4

It's pretty complicated, but you managed to get that working.

In handleReset, you're able to set itemvalues back to a null state when the "Reset" button is pressed:

handleReset = () => {
  this.setState({
    itemvalues: [{}]
  });
};

But the problem is that the text is not cleared from all of the input boxes:

You've already handled storing the actual text in the state, so here's a simple way to clear the text from all input boxes.

How to clear the values all inputs

At the top of handleReset, use document.querySelectorAll('input') to select all the input elements on the page:

handleReset = () => {
  document.querySelectorAll('input');
  this.setState({
    itemvalues: [{}]
  });
};

document.querySelectorAll('input') returns a NodeList, which is a bit different than an array, so you can't use any useful array methods on it.

To turn it into an array, pass document.querySelectorAll('input') to Array.from():

handleReset = () => {
  Array.from(document.querySelectorAll('input'));
  this.setState({
    itemvalues: [{}]
  });
};

Now all you have to do is iterate through each of the inputs and set its value attribute to an empty string. The forEach method is a good candidate for this:

handleReset = () => {
  Array.from(document.querySelectorAll("input")).forEach(
    input => (input.value = "")
  );
  this.setState({
    itemvalues: [{}]
  });
};

Now when a user presses the "Reset" button, the value of every input is cleared, too:

In this problem you have to complete the multiplyAll() function, and takes a multi-dimensional array as an argument. Remember that a multi-dimensional array, sometimes called a 2D array, is just an array of arrays, for example, [[1,2], [3,4], [5,6]].

In the editor on the right, multiplyAll() is defined as follows:

function multiplyAll(arr) {
  var product = 1;
  // Only change code below this line

  // Only change code above this line
  return product;
}

multiplyAll([[1,2],[3,4],[5,6,7]]);

You need to complete the function so it multiplies the product variable by each number in the sub-arrays of the parameter arr, which is a multi-dimensional array.

There are a lot of different ways to solve this problem, but we'll focus on the simplest method using for loops.

Set up your for loops

Because arr is a multi-dimensional array, you'll need two for loops: one to loop through each of the sub-arrays arrays, and another to loop through the elements in each sub-array.

Loop through the inner arrays

To do this, set up a for loop like you've done in previous challenges:

function multiplyAll(arr) {
  let product = 1;
  // Only change code below this line
  for (let i = 0; i < arr.length; i++) {

  }
  // Only change code above this line
  return product;
}

multiplyAll([[1,2],[3,4],[5,6,7]]);

Note that we're using let instead of var for the loop and to declare product. In this challenge you won't notice a difference between the two, but generally it's good practice to use ES6's const and let whenever you can. You can read more about why in this article.

Now log each of the sub-arrays to the console:

function multiplyAll(arr) {
  let product = 1;
  // Only change code below this line
  for (let i = 0; i < arr.length; i++) {
    console.log(arr[i]);
  }
  // Only change code above this line
  return product;
}

multiplyAll([[1,2],[3,4],[5,6,7]]);

Because you're calling multiplyAll() with [[1,2],[3,4],[5,6,7]] at the bottom, you should see the following:

[ 1, 2 ]
[ 3, 4 ]
[ 5, 6, 7 ]

Loop through the elements in each sub-array

Now you need to loop through each number in the sub-arrays you just logged to the console.

Remove console.log(arr[i]); and create another for loop inside of the one you just wrote:

function multiplyAll(arr) {
  let product = 1;
  // Only change code below this line
  for (let i = 0; i < arr.length; i++) {
    for (let j = 0; j < arr[i].length; j++) {

    }
  }
  // Only change code above this line
  return product;
}

multiplyAll([[1,2],[3,4],[5,6,7]]);

Remember that, for the inner loop, we need to check the .length of arr[i] since arr[i] is one of the sub-arrays we looked at earlier.

Now log arr[i][j] to the console to see each of the individual elements:

function multiplyAll(arr) {
  let product = 1;
  // Only change code below this line
  for (let i = 0; i < arr.length; i++) {
    for (let j = 0; j < arr[i].length; j++) {
      console.log(arr[i][j]);
    }
  }
  // Only change code above this line
  return product;
}

multiplyAll([[1,2],[3,4],[5,6,7]]);

1
2
3
4
5
6
7

Finally, multiply product by every element in each of the sub-arrays:

function multiplyAll(arr) {
  let product = 1;
  // Only change code below this line
  for (let i = 0; i < arr.length; i++) {
    for (let j = 0; j < arr[i].length; j++) {
      product *= arr[i][j];
    }
  }
  // Only change code above this line
  return product;
}

multiplyAll([[1,2],[3,4],[5,6,7]]);

If you log product to the console, you'll see the correct answer for each test case:

function multiplyAll(arr) {
  let product = 1;
  // Only change code below this line
  for (let i = 0; i < arr.length; i++) {
    for (let j = 0; j < arr[i].length; j++) {
      product *= arr[i][j];
    }
  }
  // Only change code above this line
  console.log(product);
  return product;
}

multiplyAll([[1,2],[3,4],[5,6,7]]);

6  // [[1], [2], [3]]
5040  // [[1, 2], [3, 4], [5, 6, 7]]
54  // [[5, 1], [0.2, 4, 0.5], [3, 9]]

A closer look

If you're still not sure why the code above works, don't worry – you're not alone. Working with nested loops is complicated, and even experienced developers can get confused.

In cases like this, it can be helpful to log something more detailed to the console. Go back to your code and log Sub-array ${i}: ${arr[i]} to the console just before the inner for loop:

function multiplyAll(arr) {
  let product = 1;
  // Only change code below this line
  for (let i = 0; i < arr.length; i++) {
    console.log(`Sub-array ${i}: ${arr[i]}`);
    for (let j = 0; j < arr[i].length; j++) {
      product *= arr[i][j];
    }
  }
  // Only change code above this line
  return product;
}

multiplyAll([[1,2],[3,4],[5,6,7]]);

In the outer for loop, each iteration goes through the sub-arrays in arr. You should see this in the console:

Sub-array 0: 1,2
Sub-array 1: 3,4
Sub-array 2: 5,6,7

Note that we're using template literals above. Sub-array ${i}: ${arr[i]} is the same as 'Sub-array ' + i + ': ' + arr[i], just much easier to write.

Now in the inner for loop, log Element ${j}: ${arr[i][j]} to the console:

function multiplyAll(arr) {
  let product = 1;
  // Only change code below this line
  for (let i = 0; i < arr.length; i++) {
    console.log(`Sub-array ${i}: ${arr[i]}`);
    for (let j = 0; j < arr[i].length; j++) {
      console.log(`Element ${j}: ${arr[i][j]}`);
      product *= arr[i][j];
    }
  }
  // Only change code above this line
  return product;
}

multiplyAll([[1,2],[3,4],[5,6,7]]);

The inner for loop goes through each element in each sub-array (arr[i]), so you should see this in the console:

Sub-array 0: 1,2
Element 0: 1
Element 1: 2
Sub-array 1: 3,4
Element 0: 3
Element 1: 4
Sub-array 2: 5,6,7
Element 0: 5
Element 1: 6
Element 2: 7

The first iteration of i grabs the first sub-array, [1, 2]. Then the first iteration of j goes through each element in that sub-array:

// i is 0
arr[0] // [1, 2];

// j is 0
arr[0][0] // 1
// j is 1
arr[0][1] // 2

-----

// i is 1
arr[1] // [3, 4]

// j is 0
arr[1][0] // 3
// j is 1
arr[1][1] // 4

...

This example is pretty simple, but arr[i][j] can still be difficult to understand without logging multiple things to the console.

One quick improvement we can make is declaring a subArray variable in the outer for loop and setting it equal to arr[i]:

function multiplyAll(arr) {
  let product = 1;
  // Only change code below this line
  for (let i = 0; i < arr.length; i++) {
    const subArray = arr[i];
    for (let j = 0; j < arr[i].length; j++) {
      product *= arr[i][j];
    }
  }
  // Only change code above this line
  return product;
}

multiplyAll([[1,2],[3,4],[5,6,7]]);

Then just make a few tweaks to the code to use the new subArray variable instead of arr[i]:

function multiplyAll(arr) {
  let product = 1;
  // Only change code below this line
  for (let i = 0; i < arr.length; i++) {
    const subArray = arr[i];
    for (let j = 0; j < subArray.length; j++) {
      product *= subArray[j];
    }
  }
  // Only change code above this line
  return product;
}

multiplyAll([[1,2],[3,4],[5,6,7]]);

That should be everything you need to know about multi-dimensional arrays and nested for loops. Now get out there and iterate with the best of 'em!

In this challenge, you need to add code to change some inline CSS conditionally based on the state of a React component.

When you first go to the challenge, here's the code you'll see:

class GateKeeper extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: ''
    };
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange(event) {
    this.setState({ input: event.target.value })
  }
  render() {
    let inputStyle = {
      border: '1px solid black'
    };
    // change code below this line

    // change code above this line
    return (
      <div>
        <h3>Don't Type Too Much:</h3>
        <input
          type="text"
          style={inputStyle}
          value={this.state.input}
          onChange={this.handleChange} />
      </div>
    );
  }
};

Notice that an inline style object, inputStyle, has already been declared with some default styling.

Your goal in this challenge is to update inputStyle so the border of the input is 3px solid red when there are more than 15 characters in the input. Note that the text in the input box is saved in the component's state as input:

...
this.state = {
  input: ''
};
...

Close, but not quite

Imagine that, after reading the description and instructions, you come up with this:

class GateKeeper extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: ''
    };
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange(event) {
    this.setState({ input: event.target.value })
  }
  render() {
    let inputStyle = {
      border: '1px solid black'
    };
    // change code below this line
    const char = 15;
    if(this.state.input > char) {
      inputStyle = {
        border:'3px solid red'
      }
    }  
    // change code above this line
    return (
      <div>
        <h3>Don't Type Too Much:</h3>
        <input
          type="text"
          style={inputStyle}
          value={this.state.input}
          onChange={this.handleChange} />
      </div>
    );
  }
};

But when you try to submit this, it doesn't pass all the tests. Let's take a closer look at what's going on.

Solutions

Using an if statement

Declaring char is fine, but take a closer look at the if condition:

if(this.state.input > char) {
  inputStyle = {
    border:'3px solid red'
  }
}

Remember that this.state.input is the value of the input box and is a string. For example, it could be "testing testing 1, 2, 3".

If you enter "testing testing 1, 2, 3" into the text box and lot this.state.input to the console:

class GateKeeper extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: ''
    };
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange(event) {
    this.setState({ input: event.target.value })
  }
  render() {
    let inputStyle = {
      border: '1px solid black'
    };
    // change code below this line
    const char = 15;
    console.log(this.state.input);
    if(this.state.input > char) {
      inputStyle = {
        border:'3px solid red'
      }
    }  
    // change code above this line
    return (
      <div>
        <h3>Don't Type Too Much:</h3>
        <input
          type="text"
          style={inputStyle}
          value={this.state.input}
          onChange={this.handleChange} />
      </div>
    );
  }
};

You'll see testing testing 1, 2, 3 in the console.

Further, if you log this.state.input > char to the console, you'll see that it evaluates to false:

class GateKeeper extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: ''
    };
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange(event) {
    this.setState({ input: event.target.value })
  }
  render() {
    let inputStyle = {
      border: '1px solid black'
    };
    // change code below this line
    const char = 15;
    console.log(this.state.input > char);
    if(this.state.input > char) {
      inputStyle = {
        border:'3px solid red'
      }
    }  
    // change code above this line
    return (
      <div>
        <h3>Don't Type Too Much:</h3>
        <input
          type="text"
          style={inputStyle}
          value={this.state.input}
          onChange={this.handleChange} />
      </div>
    );
  }
};

Simply put, you can't compare a string (this.state.input) directly to char, which is a number.

Instead, call the .length on this.state.input to get the length of the string and compare that to count:

class GateKeeper extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: ''
    };
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange(event) {
    this.setState({ input: event.target.value })
  }
  render() {
    let inputStyle = {
      border: '1px solid black'
    };
    // change code below this line
    const char = 15;
    if(this.state.input.length > char) {
      inputStyle = {
        border:'3px solid red'
      }
    }  
    // change code above this line
    return (
      <div>
        <h3>Don't Type Too Much:</h3>
        <input
          type="text"
          style={inputStyle}
          value={this.state.input}
          onChange={this.handleChange} />
      </div>
    );
  }
};

Since the length of the string "testing testing 1, 2, 3" is 23 characters long (including spaces and commas), the border of the input box will turn red:

Using a ternary operator

A ternary or conditional operator is like a one line if...else statement, and can help shorten your code significantly.

Go back to your solution and remove everything except the char variable:

class GateKeeper extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: ''
    };
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange(event) {
    this.setState({ input: event.target.value })
  }
  render() {
    let inputStyle = {
      border: '1px solid black'
    };
    // change code below this line

    // change code above this line
    return (
      <div>
        <h3>Don't Type Too Much:</h3>
        <input
          type="text"
          style={inputStyle}
          value={this.state.input}
          onChange={this.handleChange} />
      </div>
    );
  }
};

Now take the condition you used in your earlier if statement and use it as the first part of the ternary condition: this.state.input.length > char ? : ;

Everything between ? and : indicates what happens if the earlier statement is true. You can just copy the code that was inside your if statement before: this.state.input.length > char ? inputStyle = { border:'3px solid red' } : ;

Now you need to handle the else portion of the ternary operator, which is everything between : and ;.

While you didn't use an else statement in your first solution, you effectively used inputStyle as-is. So just use inputStyle the way it's declared earlier in your code: this.state.input.length > char ? inputStyle = { border:'3px solid red' } : inputStyle;

Your whole solution should look like this:

class GateKeeper extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: ''
    };
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange(event) {
    this.setState({ input: event.target.value })
  }
  render() {
    let inputStyle = {
      border: '1px solid black'
    };
    // change code below this line
    const char = 15;
    this.state.input.length > char ? inputStyle = { border:'3px solid red' } : inputStyle;
    // change code above this line
    return (
      <div>
        <h3>Don't Type Too Much:</h3>
        <input
          type="text"
          style={inputStyle}
          value={this.state.input}
          onChange={this.handleChange} />
      </div>
    );
  }
};

And that's it – you should be able to pass the challenge! Now go forth and conditionally style React components to your heart's content.

But while jQuery is a powerful library, it can't do everything. That's where having solid understanding of vanilla JavaScript comes in handy.

Say you have a Wikipedia Viewer project like this:

<div class="search">
  <p id="text">Search on Wikipedia</p>
  <input id="searchbox" type="search"></input>
  <button id="searchbutton">Search</button>
  <a href="https://en.wikipedia.org/wiki/Special:Random" target="_blank"><button id="searchbutton">Random Article</button></a>
  <div class="resultingarticles"></div>
</div>

$("#searchbox").keyup(function(event) {
  if(event.keyCode === 13) {
    $("#searchbutton").click();
  };
});

$("#searchbutton").click(function() {

  var searchInput = document.getElementById("searchbox").value;
  searchInput = searchInput.toLowerCase();

  if(searchInput !== "") {

    var myRequest = new XMLHttpRequest();
    myRequest.open('GET','https://en.wikipedia.org/w/api.php?action=query&list=search&srsearch='+ searchInput + '&utf8=&format=json&origin=*');

      myRequest.onload = function() {
      var searchResults = JSON.parse(myRequest.responseText);

      $(".resultingarticles").empty();  

      for(i=0; i<10; i++) {
        var articleTitle = searchResults.query.search[i].title;
        var articleSnippet = searchResults.query.search[i].snippet;
        var articleId = searchResults.query.search[i].pageid;
        var articleLink = "https://en.wikipedia.org/?curid=" + articleId;
        $(".resultingarticles").append("<a href='" + articleLink + "' target='_blank'>" + "<div class='article'>" + "<p>"+articleTitle+"</p>" + "<p>" + articleSnippet + "</p>" + "</div>" + "</a>");
      };

      };

    myRequest.send();

  };
});

Everything is working as you expect – you can enter text into the search box, hit enter or the "Search" button, and see a list of Wikipedia articles.

Because you're using type="search" on your input element, the Chrome browser will automatically add an "X" to the end of the input if there's text and you hover over the input. Note that other browsers might handle type="search" differently.

When you click on the "X", the text disappears.

But say you already have a list of articles, and when you clear the text, you also want to clear the populated articles:

It turns out that clicking the "X" in the search box fires a "search" event. jQuery doesn't support the "search" event, so you'll have to write an event listener in vanilla JavaScript:

document.getElementById("searchbox").addEventListener("search", function(event) {
  $(".resultingarticles").empty();  
});

Now when a search event is fired, you can use jQuery to clear the div element with the articles:

Imagine you have your images stored in a directory next to a component like this:

/src
  /components
    - component1
    - component2
/img
  - img1
  - img2

And you're trying to access the images in the /img directory from component2:

import React, { Component, useState, useEffect } from 'react';
import { render } from 'react-dom'
import { useTransition, animated, config } from "react-spring";
import imgArr from './images';
import '../App.css';

const Slideshow = () => {
  const [index, set] = useState(0)
  const transitions = useTransition(imgArr[index], item => item.id, {
    from: { opacity: 0 },
    enter: {opacity: 1 },
    leave: { opacity: 0 },
    config: config.molasses,
  })
  useEffect(() => void setInterval(() => set(state => (state + 1) % 4), 2000), [])
  return transitions.map(({ item, props, key }) => (
    <animated.div
      key={key}
      className="bg"
      style={{ ...props, slideshowContainerStyle}}
    >
      <img className="img" src={require(item.url)} alt=""/>
    </animated.div>
  ))
}

const slideshowContainerStyle = {
 width: '80%',
 height: '300px'
}


export default Slideshow;

You've tried the paths ../img/img1.jpg and ..img/img1.jpg, but get Error: Cannot find module '<path>' .

So what's going on here?

A little about create-react-app

Like most people, you probably used create-react-app to bootstrap your project.

In that case, using relative paths can be a bit tricky because create-react-app builds the HTML, CSS, and JavaScript files to an output folder:

/public
  - index.html
  - bundle.js
  - style.css

There are a number of ways to use images with create-react-app, but one of the easiest is to include your images into /public. When your project is built, /public serves as the root directory.

You can read more about adding images or other assets in the Create React App docs.

Importing images

If you took a look at the docs, you'll notice that the code includes import statements to load assets like images and fonts.

Importing is useful when your asset, in this case an image, is in the same directory or near the component that uses it, and won't be used anywhere else. For example, if you have an input component with buttons that use SVGs for thumbs up and thumbs down icons.

A bit advantage of using import is that it will throw an error during build time if there's a typo. This sort of checking helps ensure users won't see a broken image that slipped by.

Imagine you're trying to write a simple recipe box application, and this is your code so far:

import React from "react";
import ReactDOM from "react-dom";

import RecipeBox from "./RecipeBox";

const rootElement = document.getElementById("root");
ReactDOM.render(
  <React.StrictMode>
    <RecipeBox />
  </React.StrictMode>,
  rootElement
);

import React from "react";

export default class RecipeBox extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: "",
      recipeList: [
        {
          recipe: "Tacos",
          directions: "make tacos",
          ingredients: ["meat"]
        },
        {
          recipe: "pizza",
          directions: "bake",
          ingredients: ["dough"]
        }
      ]
    };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({
      input: event.target.value
    });
  }

  handleSubmit() {
    const newRecipe = this.state.recipelist[0].recipe;
    setState({
      recipeList[0].recipe: newRecipe
    });
  }

  render() {
    const ITEMS = this.state.recipeList.map(({ directions }) => (
      <li>{directions}</li>
    ));
    return (
      <div>
        <EditList
          input={this.state.input}
          handleChange={this.handleChange}
          onSubmit={this.handleSubmit}
        />
        <ul>{ITEMS}</ul>
      </div>
    );
  }
}

class EditList extends React.Component {
  render() {
    return (
      <div>
        <input
          type='text'
          value={this.props.input}
          onChange={this.props.handleChange}
        />
        <button onClick={this.props.onSubmit}>Submit</button>
      </div>
    );
  }
}

Eventually you want handleChange to capture what the user enters and update specific recipes.

But when you try to run your app, you see a lot of errors in the terminal and dev console. Let's take a closer look at what's going on.

Fixing errors

First in handleSubmit, setState should be this.setState:

handleSubmit() {
  const newRecipe = this.state.recipelist[0].recipe;
  this.setState({
    recipeList[0].recipe: newRecipe
  });
}

You're already prop drilling, or passing things from the parent RecipeBox component to its child EditList properly. But when someone enters text into the input box and clicks "Submit", the state isn't updated the way you expect.

How to update the state from a child component

Here you're running into issues because you're trying to update the state of a nested array (recipeList[0].recipe: newRecipe). That won't work in React.

Instead, you need to create a copy of the full recipeList array, modify the value of recipe for the element you want to update in the copied array, and assign the modified array back to this.state.recipeList.

First, use the spread syntax to create a copy of this.state.recipeList:

handleSubmit() {
  const recipeList = [...this.state.recipeList];
  this.setState({
    recipeList[0].recipe: newRecipe
  });
}

Then update the recipe for the element you want to update. Let's do the first element as a proof of concept:

handleSubmit() {
  const recipeList = [...this.state.recipeList];
  recipeList[0].recipe = this.state.input;
  this.setState({
    recipeList[0].recipe: newRecipe
  });
}

Finally, update the current recipeList with your new copy. Also, set input to an empty string so the textbox is empty after users click "Submit":

handleSubmit() {
  const recipeList = [...this.state.recipeList];
  recipeList[0].recipe = this.state.input;
  this.setState({
    recipeList,
    input: ""
  });
}

While they're perfect for people who just need a web browser to perform basic tasks, if you're getting into development with just a Chromebook, you might be wondering if it's better to invest in a PC.

But with all the cloud-based technologies and recent updates to Chrome OS, you've got a lot of options. We'll go over a few of the popular ones here.

Cloud-based solutions

If you're completely new to web development, there's of course freeCodeCamp.org. The entire curriculum can be completed entirely in the browser and by leveraging tools like CodePen, CodeSandbox, Glitch, and Repl.it for more complex projects.

Even experienced developers use one or more of the sites listed above for quick prototyping and for easily sharing their projects with others, all for free. While they might be slower than a native dev environment, the fact that you can access them from any internet connected device and that everything is saved to their servers is a big plus.

Linux for Chromebooks

As of Chrome OS v.69, you can enable Linux for Chromebooks and install a beta version of the Linux shell on select Chromebooks. Though the list of supported devices is short, most if not all future Chromebooks are expected to support this feature.

What basically happens is that Chrome OS runs a version of Debian in a virtual machine. Because Debian is what Ubuntu, a popular Linux distribution/operating system, is based on, you should be able to install anything on your Chromebook like you would on a Debian/Ubuntu machine.

For example, if you want to install Firefox, all you need to do is open up the terminal and enter sudo apt install firefox.

There are some disadvantages, though. Currently this feature is in beta, and hardware acceleration is still not supported in non-Chrome OS applications.

Things like Firefox or VSCode will run slower than on other machines running a Linux distribution like Ubuntu natively. This also means that video decoding is a bit slower, too, and playback may suffer as a result. Also, devices like microphones and webcams are not supported yet.

Check out this page for more information about what's not supported yet.

For example, imagine you have an array like this:

const storage = [
  { data: '1', status: '0' },
  { data: '2', status: '0' },
  { data: '3', status: '0' },
  { data: '4', status: '0' },
  { data: '5', status: '0' },
  { data: '6', status: '0' },
  { data: '7', status: '1' },
];

And you only want to count the number of objects with status set to '0'.

Like with just about everything in programming, there are a number of ways to do this. We'll go through a few of the common methods below.

Use a for loop

Probably the easiest way would be to declare a counter variable, loop through the array, and iterate counter only if status is equal to '0':

const storage = [
  { data: '1', status: '0' },
  { data: '2', status: '0' },
  { data: '3', status: '0' },
  { data: '4', status: '0' },
  { data: '5', status: '0' },
  { data: '6', status: '0' },
  { data: '7', status: '1' },
];

let counter = 0;
for (let i = 0; i < storage.length; i++) {
  if (storage[i].status === '0') counter++;
}

console.log(counter); // 6

You could simplify this a bit by using a for...of loop:

const storage = [
  { data: '1', status: '0' },
  { data: '2', status: '0' },
  { data: '3', status: '0' },
  { data: '4', status: '0' },
  { data: '5', status: '0' },
  { data: '6', status: '0' },
  { data: '7', status: '1' },
];

let counter = 0;
for (const obj of storage) {
  if (obj.status === '0') counter++;
}

console.log(counter); // 6

Also, you could create a function to do the same thing if you have other arrays of objects to count conditionally:

const storage = [
  { data: '1', status: '0' },
  { data: '2', status: '0' },
  { data: '3', status: '0' },
  { data: '4', status: '0' },
  { data: '5', status: '0' },
  { data: '6', status: '0' },
  { data: '7', status: '1' },
];

function statusCounter(inputs) {
  let counter = 0;
  for (const input of inputs) {
    if (input.status === '0') counter += 1;
  }
  return counter;
}

statusCounter(storage); // 6

Use array methods

JavaScript includes a bunch of helpful methods when working with arrays. Each one can be chained to an array and passed different parameters to work with while iterating through the elements in the array.

The two we'll look at are filter() and reduce().

filter()

The filter method does just that – it iterates through each element in the array and filters out all elements that don't meet the condition(s) you provide. It then returns a new array with all the elements that returned true based on your condition(s).

For example:

const storage = [
  { data: '1', status: '0' },
  { data: '2', status: '0' },
  { data: '3', status: '0' },
  { data: '4', status: '0' },
  { data: '5', status: '0' },
  { data: '6', status: '0' },
  { data: '7', status: '1' },
];

const count = storage.filter(function(item){
  if (item.status === 0) {
    return true;
  } else {
    return false;
  }
});

/*
[
  { data: '1', status: '0' },
  { data: '2', status: '0' },
  { data: '3', status: '0' },
  { data: '4', status: '0' },
  { data: '5', status: '0' },
  { data: '6', status: '0' }
] 
*/

Now that you've filtered out the object with status: '1', just call the length() method on the new array to get the total count of objects with status: '1':

const storage = [
  { data: '1', status: '0' },
  { data: '2', status: '0' },
  { data: '3', status: '0' },
  { data: '4', status: '0' },
  { data: '5', status: '0' },
  { data: '6', status: '0' },
  { data: '7', status: '1' },
];

const count = storage.filter(function(item){
  if (item.status === 0) {
    return true;
  } else {
    return false;
  }
}).length; // 6

But this can be shortened a lot with ES6 syntax:

const storage = [
  { data: '1', status: '0' },
  { data: '2', status: '0' },
  { data: '3', status: '0' },
  { data: '4', status: '0' },
  { data: '5', status: '0' },
  { data: '6', status: '0' },
  { data: '7', status: '1' },
];

const count = storage.filter(item => item.status === '0').length; // 6

reduce()

Think of the reduce() method like a Swiss army knife – it's extremely flexible, and lets you take an array as input and transform it into just about anything. Even better, like filter(), this method returns a new array, leaving the original unchanged.

You can read more about reduce() in this article.

For our purposes, we want to take an array, examine its contents, and produce a number. Here's a simple way to do that:

const storage = [
  { data: '1', status: '0' },
  { data: '2', status: '0' },
  { data: '3', status: '0' },
  { data: '4', status: '0' },
  { data: '5', status: '0' },
  { data: '6', status: '0' },
  { data: '7', status: '1' },
];

const count = storage.reduce((counter, obj) => {
  if (obj.status === '0') counter += 1
  return counter;
}, 0); // 6

You could simplify further by using ES6 syntax and a ternary operator:

const storage = [
  { data: '1', status: '0' },
  { data: '2', status: '0' },
  { data: '3', status: '0' },
  { data: '4', status: '0' },
  { data: '5', status: '0' },
  { data: '6', status: '0' },
  { data: '7', status: '1' },
];

const count = storage.reduce((counter, obj) => obj.status === '0' ? counter += 1 : counter, 0); // 6

And even a bit more by using object destructuring:

const storage = [
  { data: '1', status: '0' },
  { data: '2', status: '0' },
  { data: '3', status: '0' },
  { data: '4', status: '0' },
  { data: '5', status: '0' },
  { data: '6', status: '0' },
  { data: '7', status: '1' },
];

const count = storage.reduce((counter, { status }) => status === '0' ? counter += 1 : counter, 0); // 6

So those are a few ways to go through the elements of an array and count them conditionally. Now get out there and count with confidence!

The problem is that there are a few gotchas that make working with components difficult for those new to React.

For example, say you have the following component, mainIntro.js:

const mainIntro = props => (
    <div id="quote-box">
     <h1> Hunter x Hunter Quotes </h1>

     <div id="text">
        "When I say it doesn't hurt me, that means I can bear it."
     </div>

     <div id="author">
        - Killua Zoldyck
     </div>

     <button id="new-quote"> Next Quote </button>

     <a href="#" id="tweet-quote" target="_blank"> Tweet this quote </a>

    </div>
)

export default mainIntro;

And want to import it into App.js:

import mainIntro from './components'

class App extends React.Component{
    render(){
        return(
            <mainIntro />
        );
    }
}


const mainNode = document.getElementById("quoter");
ReactDOM.render(<App />,mainNode);

But mainIntro isn't loading for some reason. Let's take a closer look at what's happening.

Naming your components

For anyone familiar with Object Oriented Programming, it's common convention to name each class with an uppercase letter. For example, a class to describe a person would be called Person to indicate that it's a class.

In React, which uses JSX rather than plain JavaScript, the first letter of a tag indicates what kind of element it is. Uppercase first characters are used to specify React components, so mainIntro should instead be called MainIntro:

const MainIntro = props => (
    <div id="quote-box">
     <h1> Hunter x Hunter Quotes </h1>

     <div id="text">
        "When I say it doesn't hurt me, that means I can bear it."
     </div>

     <div id="author">
        - Killua Zoldyck
     </div>

     <button id="new-quote"> Next Quote </button>

     <a href="#" id="tweet-quote" target="_blank"> Tweet this quote </a>

    </div>
)

export default MainIntro;

While the filename can still be mainIntro.js, it's a good idea to capitalize the first character, too. Later when you scan the contents of the directory, you'll quickly be able to pick out that MainIntro.js contains a component.

Now App.js should look like this:

import MainIntro from './components/MainIntro.js';

class App extends React.Component{
    render(){
        return(
            <MainIntro />
        );
    }
}


const mainNode = document.getElementById("quoter");
ReactDOM.render(<App />,mainNode);

How is React Installed?

There are two main ways to use React. First, install and set it up locally, probably through create-react-app. Second, through a CDN.

You might have noticed above that the code snippets don't actually include React in the project with import React from'react';. This will throw an error if you're working with React locally.

However, if you're using a CDN to load React, it's available globally and you don't need to import it like above.

Arrow Functions

Before diving into React, it's important to have a solid understanding of JavaScript, particularly ES6 syntax.

Take another look at the MainIntro component:

const MainIntro = props => (
    <div id="quote-box">
     <h1> Hunter x Hunter Quotes </h1>

     <div id="text">
        "When I say it doesn't hurt me, that means I can bear it."
     </div>

     <div id="author">
        - Killua Zoldyck
     </div>

     <button id="new-quote"> Next Quote </button>

     <a href="#" id="tweet-quote" target="_blank"> Tweet this quote </a>

    </div>
)

export default MainIntro;

If you look closely at the first line, you'll notice a syntax error:

const MainIntro = props => (

You're writing a functional component, which are typically simple JavaScript functions that can accept props as an argument and return valid JSX. Of course, the syntax needs to be correct for it to return properly.

Arrow functions can be written in a lot of ways, but for this example, you'll need to add the curly braces ({}) and make sure to return JSX from the component itself:

const MainIntro = props => {
  return (
    <div id="quote-box">
     //... rest of the code   
    </div>
  );
}

After implementing all the changes mentioned above, your component should now render properly.

Though the main distinction between functional and class components in React used to be that the former was "stateless" while the latter was "statefull", React Hooks have blurred the lines between them. Read more about both components in this overview and this deeper dive into functional components with React Hooks.