How do I use arrow functions in React

Question

I'm working on a node and react project where when i try to use an arrow function, it brings the error that the function is not defined. I've tried following every tutorial I can get but I'm not able to solve this. Here is my code;

import React from 'react';
import './App.css';
import {BrowserRouter as Router, Link} from 'react-router-dom';


class App extends React.Component {
  constructor(props) {
    super(props);
    this.state={apiResponse:""}
  }

  callAPI(){
    fetch("http://localhost:9000/testAPI")
    .then(res=> res.text())
    .then(res=> this.setState({apiResponse: res}));
  }

  componentWillMount(){
    this.callAPI();
  }

  Trial = ()=>{
    return(
      <div>this is my div</div>
    );
  }

render(){
  return (
    <div className="App">
      <p>{this.state.apiResponse}</p>

      <Trial />

    </div>
  );
}
}

export default App;

and the error message i'm getting is:

./src/App.js
  Line 33:8:  'Trial' is not defined  react/jsx-no-undef

Search for the keywords to learn more about each error.
This error occurred during the build time and cannot be dismissed

any assistance will be highly appreciated

Answer 1

Instead of <Trial /> you need to call as a function as you defined, Trial isn't a component.

Try as the following:

<div className="App">
   <p>{this.state.apiResponse}</p>

   { this.Trial() }
</div>

Answer 2

you should give the context this to call your function. Try this snippet

import React from "react";
import "./styles.css";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { apiResponse: "" };
  }

  Trial = () => {
    return <div>this is my div</div>;
  };

  render() {
    return (
      <div className="App">
        <p> coucou </p>
        <this.Trial />
      </div>
    );
  }
}

export default App;

Answer 3

If you want to create a new component your code will be much clearer if you move it before the class.

Also the standard place to call api is componentDidMount. So react will render the page with empty data very quickly, then it calls the async functions.

import React from 'react';
import './App.css';
import {BrowserRouter as Router, Link} from 'react-router-dom';


const Trial = ()=>{
    return(
      <div>this is my div</div>
    );
  }

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state={apiResponse:""}
  }

  callAPI(){
    fetch("http://localhost:9000/testAPI")
    .then(res=> res.text())
    .then(res=> this.setState({apiResponse: res}));
  }

  componentDidMount(){
    this.callAPI();
  }

render(){
  return (
    <div className="App">
      <p>{this.state.apiResponse}</p>

      <Trial />

    </div>
  );
}
}

export default App;

This is an example: https://codesandbox.io/s/hopeful-hellman-g4tc3

Answer 4

Better way to write Trial component is outside to the class either in same file or in other file depend on reusability .

//outside class in  different file

export function Trial(){
    return(
      <div>this is my div</div>
    );
  }

//outside class in a same  file



function Trial(){
        return(
          <div>this is my div</div>
        );
      }

If you don't want to do this,

you should write {this.Trail()} instead <Trial/> as Trial is a class instance method and not a component.

Answer 5

As I have gone through your code you can access your arrow function by calling it correctly you just have to change below code.

render(){
  return (
    <div className="App">
      <p>{this.state.apiResponse}</p>

      <this.Trial />

    </div>
  );
}

or better way to access this

render(){
  return (
    <div className="App">
      <p>{this.state.apiResponse}</p>

      {this.trial()}

    </div>
  );
}

Answer 6

You can call it as a function in your jsx like

render(){
  return (
    <div className="App">
      <p>{this.state.apiResponse}</p>

      { this.trial() }

    </div>
  );
}

But I will suggest not doing so. Instead, make it a functional component. You can create it in the same file as this one or on a separate dedicated page.

So your whole code should be like this

import React from 'react';
import './App.css';
import {BrowserRouter as Router, Link} from 'react-router-dom';


const Trial = ()=> ( <div>this is my div</div>)

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state={apiResponse:""}
  }

  callAPI(){
    fetch("http://localhost:9000/testAPI")
    .then(res=> res.text())
    .then(res=> this.setState({apiResponse: res}));
  }

  componentWillMount(){
    this.callAPI();
  }

render(){
  return (
    <div className="App">
      <p>{this.state.apiResponse}</p>

      <Trial />

    </div>
  );
}
}

export default App;

Hope this helps