---
# System prepended metadata

title: class vs function

---

# class vs function
![](https://i.imgur.com/SnIqpJS.jpg)

# Rendering JSX

function FunctionalComponent() {
 return <h1>Hello, world</h1>;
}

functional component is a javascript /es6 function that returns react element(JSX).

class ClassComponent extends Component {
 render() {
   return <h1>Hello, world</h1>;
 }
}

classs component is es6 classes which have a addional render method for returned JSX.

# Passing props

in class component <Component name="jahan" />
OR
class ClassComponent extends React.Component {
  render() {
    const { name } = this.props;
    return <h1>Hello, { name }</h1>;
 }
}

In function component

const FunctionalComponent = ({ name }) => {
 return <h1>Hello, {name}</h1>;
};

OR

const FunctionalComponent = (props) => {
 return <h1>Hello, {props.name}</h1>;
};

# Handling state

In function component

const FunctionalComponent = () => {
 const [count, setCount] = React.useState(0);

 return (
   <div>
     <p>count: {count}</p>
     <button onClick={() => setCount(count + 1)}>Click</button>
   </div>
 );
};

In class Component

class ClassComponent extends React.Component {
 constructor(props) {
   super(props);
   this.state = {
     count: 0
   };
 }

 render() {
   return (
     <div>
       <p>count: {this.state.count} times</p>
       <button onClick={() => this.setState({ count: this.state.count + 1 })}>
         Click
       </button>
     </div>
   );
 }
}