Error: Property ‘myRef’ does not exist on type ‘MyComponent

We face below error while using ref in our ReactJS application.

Error: Property ‘myRef’ does not exist on type ‘MyComponent

To resolve this error, declare your ref variable inside the class component

export default class MyComponent extends React.Component<IMyComponentProps, any> {
  private myRef;
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
}

Empty an array in ReactJS

Below is a piece of code to empty an array state object in ReactJS or Set an array object to blank.

this.setState({ arrayName: [] });

Error: this.setstate() is not a function in ReactJS

We can get this error inside a function call. Remember to bind that function.

constructor(props){
    super(props);
    this.clear=this.clear.bind(this); // remember to bind your function.
    this.state{
      name=''
    };
  }

  public clear():void{
    this.setState({name:'Akanksha'}); // error here
  }

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

Pass data from Child component to Parent component

we have previously seen how to pass data from parent component to child component. In this article, we will see how to pass data from child component to parent component.

For this, we pass functions as props in React component.

Let’s create a new react application. Delete all the files from src folder EXCEPT index.js. Create a new file SearchBar.js in src folder.

index.js

Replace the existing code with below code

import React from 'react';
import ReactDOM from 'react-dom';
import SearchBar from './SearchBar'

class App extends React.Component {
    // defining state
    state = { name: '' };
    render() {
        return (                    
            <div>
                <SearchBar onNameSubmit={this.onSearchSubmit}/>
            </div>
        );
    }

    onSearchSubmit(userName){
        console.log(userName);
    }
}

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

SearchBar onNameSubmit={this.onSearchSubmit}
This statement will pass function as prop to the Child Component, SearchBar

SearchBar.js

Paste the below code in this file

import React from 'react';

class SearchBar extends React.Component {
    constructor(){
        super();
        this.state = { name: '' };
        this.onFormSubmit=this.onFormSubmit.bind(this); 
    }
    
    onFormSubmit(event) {
        event.preventDefault();
        this.props.onNameSubmit(this.state.name);
    }

    render() {
        return (           
          <div className="ui segment">             
            <form className="ui form" onSubmit={this.onFormSubmit}>       
               <div className="field">
                  <label>Enter your name</label>
                  <input type="text" value={this.state.name} onChange={(e) => this.setState({ name: e.target.value })} />
               </div>
             </form>
           </div>
        );
    }
}

export default SearchBar;

this.props.onNameSubmit(this.state.name);
This piece of code will pass the value from child component to parent component using functions in props.

Below is the output of above code
Type your name or anything else in the textbox, press enter. You can see the value you types in console.