I am new to REACT, I have to call a function resetArray which is inside my sorting class component from another file onClick of a button

Jayesh Shukla

This is my sorting.js file and I am trying to access the resetArray of this file from a onClick button listener of App.js. But unable to do it. Please help.

export default class sorting extends React.Component {
 constructor() {
   super();
   this.state = {
    array: [],
   };
 }

 resetArray() {
   var array = [];
   for (let i = 0; i < 80; i++) {
      array.push(this.randomNumber(10, 350));
   }
   this.setState({ array });
 }
}

This is my App.js file

import React from 'react';
import Sorting from './sorting/sorting.js';

class App extends React.Component {
  render() {
  return (
    <div>
      <Sorting />
      <button onClick={() => this.resetArray()}>
    </div>
  )
  }
}
Lakshya

You need to bring your state up in the hierarchy, in this case, array to your App's state instead of Sorting. Also, you can declare your function in the App.js and pass it as a prop to Sorting.js and call it from there.

I have refactored your code to make it work.

Codesandbox with your refactored code (check console)

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

How do I call a function inside another function through onclick in my React component?

How can I call a function from inside another class and use it in a new file?

How do I call my non static function from another class without making a new instance of class? - React Native Router Flux

React: Can i call a function component from a Class component on demand?

how do i call a function from another class which contain my objects?

How can I call a function from one component to another? React

How would I call a function from another component in react native?

I have a button inside my grid view, I want to send data to another activity when the button (which is inside grid view) is clicked

Kotlin - How i can access my new class extension function from another file

I have my modal component in a different file and I'm trying to open it from another component

I am getting function name in the form of a string from the backend i need to add it to onClick event of a button in react

Why Am I getting my ArrayList empty if I call it from another class?

How I define which button onclick from inside a loop

I am new to react and wanted to have functions/buttons from one file to have effects on contents in another file. So, what is the way to do so?

I am not able to call method from another file to main project file to run my test case

How can i make my second button have an onclick function

call react component in loop based on onclick button function which sets the state to true once button is clicked

How do I call a function inside of another function from java script file in html file?

I have a jsx button that should "flip" the data from one react component to another (siblings) that is not working for some reason

I downcasted my variable but I cannot call the function of the new class

How do I call a suspend function from a React button onClick event in Kotlin/JS?

Call a function from another class component in React.js

I am trying to use redux in my project and I am have a problem with call a function that using dispatch

How do I call a method inside another class from my main?

How do I call a method from another class component in React.js

How to call a function from another file in a React component

How can I have React Native navigation load component from another file?

How to call a function which is inside a class in React?

Call React Component Function from onclick in dangerouslySetInnerHTML

TOP Ranking

HotTag

Archive