Call a function from another class component in React.js

Question

I would like to split my render into several parts.

There must be some code bits missing because my real code is more than a thousand lines, this one is for example.

Basically I would like to be able to call Page2 and use the functions handleSubmit and handleChange in the Page2. But when i'm calling Page2, the code say he don't find the handleSubmit and the handleChange. I would like it to work as if I had not separated my code into several functions. If anyone have a idea :/

So I separated my code like this:

Page1.js :

  import {Page2} from './Page2';

  const initialState = { test:'', test2: ''};


  export default class Page1 extends Component {
          constructor(props) {
            super(props);
            this.state = initialState;
            this.handleSubmit = this.handleSubmit.bind(this);
            this.handleChange = this.handleChange.bind(this);
           }
          handleChange(event) {
            const InputValue = event.target.value;
            const stateField = event.target.name;
            this.setState({
              [stateField]: InputValue,
            });
           console.log(this.state);
         }

         async handleSubmit(event) {
            this.setState({ loading: true });
            event.preventDefault();
            const { test= ''} = this.state;
            await axios.post(' (endpoint API)',
             { key1: `${test}`);
         }
       render() {
        return (
          <Tabs selectedIndex={this.state.tabIndex} onSelect={tabIndex => this.setState({ tabIndex })}>
            <TabList>
              <Tab >Non Dynamique</Tab>
              <Tab> Automation </Tab>
          </TabList>
          <TabPanel>
            <Input type="number" step="0.01" name="test" onChange={this.handleChange} value= 
               {this.state.test || ''}/> </Col>
           <Button type="submit"> Update </Button>
           </TabPanel>
           <TabPanel>
             {this.Page2}

           </TabPanel>
          );
      }
}

Page 2:

    export class Page2 extends Component {
     render() {
      return(
        <Input type="number" step="0.01" name="test2" onChange={this.handleChange} value= 
               {this.state.test || ''}/> </Col>
        <Button type="submit"> Update </Button>
           );
        }
      }

Thank you for any response

uday · Accepted Answer · 2019-11-15 11:25:56Z

3

you need to render page2 as react component and pass those function reference as props something like this.

<Page2 handleChange={this.handleChange} handleSubmit={this.handleSubmit} />

In Page2 component you can get the above function reference in props.

export default class Page2 extends React.Component {
        constructor(props) {
          super(props);
          this.state= {

          }
         }

     render() {
       const { handleSubmit, handleChange} = this.props
      return(
        <div>
         <Input type="number" step="0.01" name="test2" onChange={handleChange} value= 
           {this.state.test || ''}/> 
         <Button type="submit" onSumbit={handleSubmit}> Update </Button>
       </div>
      )
    }
}

edited Nov 15, 2019 at 11:25

answered Nov 15, 2019 at 11:08

uday

1,48112 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Jacquob Cast Over a year ago

Thanks, but i get error with this code : "Warning: The tag <Page2> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter." and "React does not recognize the handleChange prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase handlechange instead. If you accidentally passed it from a parent component, remove it from the DOM element.". I don't know if you have a idea why i have this weird errors

uday Over a year ago

update you're page2 component name it is render2. React component, start its name with an uppercase letter

uday Over a year ago

as you're using default export you can import like this in page1 component import Page2 from './Page2';

Jacquob Cast Over a year ago

Yeah the render2 was a mistake of writing. But it was the uppercase the problem. I just replaced page2 in Page2 on the <Page2 handleChange={this.handleChange} handleSubmit={this.handleSubmit} /> , and it's working. I'm gonna try to put this example to my code. But now i see who is working. So thanks you so much

Harsh Mishra · Accepted Answer · 2019-11-15 11:15:41Z

0

<Page2 handleChange={this.handleChange} handleSubmit={this.handleSubmit} test={this.state.test}/>

On Page2 code

export default  render2 = (props) => {
  return <div>
        <Input type="number" step="0.01" name="test2" onChange={props.handleChange} value= 
               {props.test || ''}/> </Col>
        <Button type="submit" handleSubmit={props.handleSubmit}> Update </Button>
</div>
};

answered Nov 15, 2019 at 11:15

Harsh Mishra

2,14514 silver badges15 bronze badges

Collectives™ on Stack Overflow

Call a function from another class component in React.js

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related