3) Learning React – Starting section 4

Video 45 – Module Introduction

Till now we were dealing with static applications. Now we will work on making the application interactive. We will look at how to handle clicks.

How to change things on the screen. How to reach a different target state?

How to transition from state a to b.

Will take a closer look at components and state.

Video 46 – Listening to events and working with event handlers

Start with reacting to clicks on a button.

Add a button in Expense.js and add an onClick event handler to that function.

import React from "react";
import "./ExpenseItem.css";
import ExpenseDate from "./ExpenseDate";
import Card from "../UI/Card";

const ExpenseItem = (props) => {
  const clickHandler = () => {
    console.log("Clicked");
  };

  return (
    <Card className="expense-item">
      <ExpenseDate date={props.expense.date} />
      <div className="expense-item__description">
        <h2>{props.expense.title}</h2>
        <div className="expense-item__price">${props.expense.amount}</div>
      </div>
      <button onClick={clickHandler}>Change Title</button>
    </Card>
  );
};

export default ExpenseItem;

Video 47 – How component functions are executed

How does react parse the JSX code?

The title is not updating when we set up an event handler. Why is this happenning?

The component is just a function. The only thing special about it is that it returns JSX.

Since it is a function, someone has to call it.

Till now we have not called the component functions. We just use them as special HTML elements in our JSX code.

React calls all the functions once. It does not repeat it.

We need a way to tell react that something has changed and it should reevaluate it.

Video 48 – Working with state

Leave a Reply

Your email address will not be published. Required fields are marked *