Conversion of functional components in react into class based component

Question

I have a very basic question I have an array of JSONs and I could easily coopy them in functional component using

const [elements, setElements] = useState([]);
  useEffect(() => {
    const res = async () => {
      const result = await axios.get('/data');
      const data = result.data;
      setElements(elements => [...elements, ...data]);
    };
    res();
  }, []);

I want to convert them into class based components and when I try to copy in setState I get []. Code is below

import React, { Component } from 'react';
import './App.css';
import axios from 'axios';
import Element from './components/Element';
class App extends Component {
  constructor(props) {
    super(props);
    this.state = { elements: [] };
  }
  componentDidMount() {
    const res = async () => {
      const result = await axios.get('/data');
      const data = result.data;
      console.log(data);
      this.setState({ elements: data });
    };
    res();
  }
  render() {
    console.log(this.state.elements);
    return (
      <div className='wrapper'>
        <div id='table'>
          {this.state.elements.map(element => (
            <Element elements={element} key={element._id} />
          ))}
        </div>
      </div>
    );
  }
}

export default App;

Here is a JSON which I am getting

(119) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, …]

this.setState({ elements: data }) will solve your issue

duc mai
– duc mai

2019-10-07 18:20:55 +00:00
Commented Oct 7, 2019 at 18:20 — duc mai
– duc mai, Commented Oct 7, 2019 at 18:20
Did not work updated full code

vinayak shahdeo
– vinayak shahdeo

2019-10-07 18:33:18 +00:00
Commented Oct 7, 2019 at 18:33 — vinayak shahdeo
– vinayak shahdeo, Commented Oct 7, 2019 at 18:33

Nathan · Accepted Answer · 2019-10-07 18:43:24Z

2

The issue is with how you're trying to set state on your React component, maybe you could try something like the following:

this.setState({ elements: data});

Can you try updating your componentDidMount() to the following:

async componentDidMount() {
 const {data} = await Axios.get('/data');
 this.setState({ elements: data });
}

Hopefully that helps!

edited Oct 7, 2019 at 18:43

answered Oct 7, 2019 at 18:21

Nathan

8,2494 gold badges30 silver badges52 bronze badges

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

2 Comments

Robbie Milejczak Over a year ago

setState accepts a function or an object, both patterns are valid

Nathan Over a year ago

Try updating your componentDidMount() method, I updated my answer for how it should look

Dmitry Reutov · Accepted Answer · 2019-10-07 18:38:01Z

1

to make code equal it should be written as this

this.setState(state => ({
   elements: [...state.elements, ...data]
}));

edited Oct 7, 2019 at 18:38

answered Oct 7, 2019 at 18:23

Dmitry Reutov

3,0321 gold badge9 silver badges22 bronze badges

1 Comment

Dmitry Reutov Over a year ago

@vinayak_shahdeo i also updated ny answer, hopefully it will work

Collectives™ on Stack Overflow

Conversion of functional components in react into class based component

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related