How to convert Class Component to Functional Component in React

March 24, 2022

I have to convert this class based to functional component

class Main extends Components{
  constructor(){
    super()
    this.state = {
      posts:[
      {
        id:"0",
        description:"abc",
        imageLink:"https.xyz"
      },
      {
        id:"1",
      description:"abc",
      imageLink:"https.xyz"
      }
    ]
    }
  }
  render(){
    return
    <>
    <Photowall posts={this.state.posts}/>
    </>
  }
}

And i have done like in functional

posts = [
      {
        id:"0",
        description:"abc",
        imageLink:"https.xyz"
      },
      {
        id:"1",
      description:"abc",
      imageLink:"https.xyz"
      }
    ]

function Main() {
  const [post, setPost] = useState('posts');
  return (

    <>
    <Header title={"Photowall"} />
    <Photowall posts = {posts}/>
    
    
    </>
  )
}

first i put posts in an array then useState to this posts. I want to call the posts from this useState not from outside like as it already like.
posts = [....]
and then
<Photowall post = {posts}/>
But error facing error

>Solution :

Based on your first example your component should look like this, with the default value of posts in the useState

import React, { useState } from "react"

const Main = () => {
    const [posts, setPosts] = useState([
        {
            id:"0",
            description:"abc",
            imageLink:"https.xyz"
        },
        {
            id:"1",
            description:"abc",
            imageLink:"https.xyz"
        }
    ])

    return (
        <>
            <Header title={"Photowall"} />
            <Photowall posts = {posts}/>
        </>
    )
}

export default Main