Convert string into number in TypeScript

var str=”10″;

var str = "10";
var num = Number(str);

Uncaught TypeError: $(…).autocomplete is not a function

Include jQuery references on the page where you have the control which you want to autocomplete. This is a jQuery function.

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

Pass Method Reference with parameters between Components

Continue with Passing Method reference between components article.

There are two ways:

• Bind method
• Arrow function

I have demonstrated both the approaches in App.js file. I am using bind method with button click and arrow function with paragraph click. But this combination is not necessary. You can do vice-versa as well.

We do not need to modify Person.js Component.

Modify App.js as per following code

Output before the click

Output after the click

bind(this, listOfArguments): list of arguments to be passed in the function.

Passing Methods reference between Components

We have created a function in parent component and we want to use that function in child component. For this, we pass methods from parent component to child components as reference using props.

Let’s make a call to the function by clicking a paragraph in one of the child component.

Persons.js

import React from 'react';

const Person = (props) => {
    return (
        <div>
         My name is {props.name} and I stay in {props.location}! {props.children}.
        </div>
    );
}

export default Person;

App.js: The method gets called when you click on the first paragraph.

import React from 'react';
import Person from './Person/Person';

class App extends React.Component {
  state = {
      person:[
        {name: "Paul", location: "New York"},
        {name: "David", location: "Atlanta"},
        {name: "Raj", location: "London"}
      ],
      otherDetails: "I am working as Software Developer"
  }
  clickHandler = () => {
    this.setState({
      person:[
        {name: "Duke", location: "New York"},
        {name: "David", location: "Atlanta"},
        {name: "Raj", location: "Delhi"},
      ]
    })
  }
  render(){
    return (
      <div>
        <Person name={this.state.person[0].name} location={this.state.person[0].location} paraClick = {this.clickHandler}/>
        <Person name={this.state.person[1].name} location={this.state.person[1].location} >{this.state.otherDetails}</Person>
        <Person name={this.state.person[2].name} location={this.state.person[2].location} />
      </div>
    );
  } 
}
export default App;

Output before clicking the first paragraph

Output after clicking the first paragraph

There will be no changes if you click other paragraphs.

Related Articles

• Event Handling
• state & props

Stateful and Stateless Components

• A Stateful component is a component that manages state either by using useState hook or by class-based approach with the state property.
• In state & props article, Person is a stateless component because it has no internal state management and App is a stateful component as it is managing internal state.
• It is a good practice to use stateless component as much as possible to manage the states. By doing this, you will also have a clear flow of data and you will have a place where main logic resides and where the data changes.
• Stateless components are also called as dumb or presentational component as they generally get the external data and preset it in a structured way and don’t have any logic in that.
• Stateful components are also called as smart or container components as they contain the state of the application in any form.

useState() Hook in ReactJS

Let’s continue with state & props article.

• We can manage state in Functional Components with React Hooks.
• React Hooks are a collection of functions which you can use in Functional Components.
• useState() REPLACE the content of the original state unlike setState() that MERGE the content to the original state.
• useState() returns an array with two elements, always. We need to store the result of it in an array constant.
• The first element of the array that we get back is always be the current state, so initially that object and whenever we change it, then the updated state.
• The second element is a function that allows us to update this state.
• We can use Array Destructuring to store these two elements that useState() will return.
• this.state only exist in class-based components. Hence, we have to replace this.state with the first element of the array.
• As we can have functions inside functions in React as well as in JavaScript, we can create event handlers within functional components.
• You can use multiple useState() for multiple states rather than managing all states in one useState().

we will not make any changes in Person.js class

Replace the code in App.js file with the below code:

import React, {useState} from 'react';
import Person from './Person/Person';

const App = props => {
  const [personState, setPersonState] = useState({
      person:[
        {name: "Paul", location: "New York"},
        {name: "David", location: "Atlanta"},
        {name: "Raj", location: "London"}
      ],
      otherDetails: "I am working as Software Developer"
  });

  const buttonClickHandler = () => {
    setPersonState({
      person:[
        {name: "Duke", location: "New York"},
        {name: "David", location: "Atlanta"},
        {name: "Raj", location: "Delhi"},
      ],
      otherDetails:personState.otherDetails
    });
  };

  return (
    <div>
      <Person name={personState.person[0].name} location={personState.person[0].location} />
      <Person name={personState.person[1].name} location={personState.person[1].location} >{personState.otherDetails}</Person>
      <Person name={personState.person[2].name} location={personState.person[2].location} />
      <button onClick={buttonClickHandler} >Click Me</button>
    </div>
  );
} 
export default App;

Below is the output before clicking the button:

Below is the output after clicking the button

You can see that “I am working as Software Developer” statement is gone after clicking the button. This is because of useState() hook as it REPLACES the old state with the new state. If you want all states to be included, you have to manually make sure to include other states.

Below line of code make sure to include the original data of the state.

 

 

Event Handling in ReactJS

We can handle events in React like Click events, Keyboard events, Form events, Focus events, Mouse events etc. Here is the official documentation of events in React.

Let’s see a sample of button click event. Continue with state and props article.

In this example, we will change the state of the component using setState() function. We use setState() method to update the state property hence updating the DOM. setState() takes an object as argument and MERGES this argument with the existing state.

In the state and props article, we have defined two state properties: person and otherDetails. Hence if we modify person property, it will look for the changes only in persons property and leave otherDetails property as it is.
Below is the code in App.js file. The changes are done only in App.js file. No code changes are done in Person.js.

import React from 'react';
import './App.css';
import Person from './Person/Person';

class App extends React.Component {
  state = {
    person:[
      {name: "Paul", location: "New York"},
      {name: "David", location: "Atlanta"},
      {name: "Raj", location: "London"}
    ],
    otherDetails: "I am working as Software Developer"
  };

  buttonClickHandler = () => {
    this.setState({
      person:[
        {name: "Duke", location: "New York"},
        {name: "David", location: "Atlanta"},
        {name: "Raj", location: "Delhi"},
      ]
    })
  }

  render(){
    return (    
      <div>
        <Person name={this.state.person[0].name} location={this.state.person[0].location} />
        <Person name={this.state.person[1].name} location={this.state.person[1].location} >{this.state.otherDetails}</Person>
        <Person name={this.state.person[2].name} location={this.state.person[2].location} />
        <button onClick={this.buttonClickHandler} >Click Me</button>
      </div>

    );
  }
}

export default App;

Below is the default output, before clicking the button.

Below is the output after we click the button

state & props in ReactJS

Below is a sample program where we can use state and props among class components and functional components.

I have created a new folder named Person.

Create a new file named Person.js in Person folder and below code in it. This is a functional component and we are using props in this. props.children displays the value that we pass between child component tags in the parent component.

import React from 'react';

const Person = (props) => {
    return (      
        <div>
          My name is {props.name} and I stay in {props.location}!  {props.children}.
        </div>
    );
}

export default Person;

Paste the below code in App.js file.

import React from 'react';
import ReactDOM from 'react-dom';
import './App.css';
import Person from './Person/Person';

class App extends React.Component {
  state = {
    person:[
      {name: "Paul", location: "New York"},
      {name: "David", location: "Atlanta"},
      {name: "Raj", location: "London"}
    ],
    otherDetails: "I am working as Software Developer"
  };

  render(){
    return (
      <div>
        <Person name={this.state.person[0].name} location={this.state.person[0].location} />
        <Person name={this.state.person[1].name} location={this.state.person[1].location} >{this.state.otherDetails}</Person>
        <Person name={this.state.person[2].name} location={this.state.person[2].location} />
      </div>
    );
  }
}

export default App;

Below is the output of above code

Destructuring in JavaScript

Destructuring allows you to extract array elements or object properties and store them in variables.

const nums = [10,20,30];
[n1, n2] = nums;
[num1, , num3]=nums;
console.log(n1 + " " + n2);
console.log(num1 + " " + num3);

Spread & Rest Operators in JavaScript

Spread

• Spread operator allows an expression to be expanded in places where zero or more arguments are expected.
• The operator is just three dots (…)
• This operator is used to add elements to arrays or add properties to objects.
• Spread takes out all elements all properties and distribute them in a new array or object.

const arr = [10,20,30];
const newArr = [...arr,40,50];

console.log(arr);
console.log(newArr);

const Person = {
  name: "Akanksha"
};

const Student = {
  ...Person,
    location: "Delhi"
};

console.log(Student.name);
console.log(Student.location);

Rest

• It is used to merge a list of function arguments into an array.
• The operator is just three dots (…)
• This is basically used in function argument list.

const PersonDetails = (...details) => {
  console.log("Name: " + details[0]);
  console.log("Address: " + details[1]);
  console.log("Education: " + details[2]);
  console.log("Others: " + details[3]);
}
PersonDetails("Akanksha","Delhi","Graduation");