How to Convert Class components to functional components in React? - reactjs

Question

import React, { PureComponent, Fragment } from 'react';
class Practice extends PureComponent {
state = {
options: [
{
name: 'Select…',
value: null,
},
{
name: 'Rui',
value: 3000,
},
{
name: 'Catla',
value: 3000,
},
{
name: 'Carpio',
value: 3000,
},
{
name: 'Tilapia',
value: 1750,
},
{
name: 'Mrigel',
value: 3000,
},
{
name: 'Pabda',
value: 3500,
},
{
name: 'Koi',
value: 750,
},
],
value: '?',
};
handleChange = (e) => {
this.setState({ value: e.target.value });
};
render() {
const { options, value } = this.state;
return (
<Fragment>
<select onChange={this.handleChange} value={value}>
{options.map(item => (
<option key={item.value} value={item.value}>
{item.name}
</option>
))}
</select>
<p>Oxygen Demand: {value}</p>
</Fragment>
);
}
}
export default Practice;

Answer 1

Use useState to handle state of options and value
Use useCallback to handle change events on select field
Return your rendered JSX
import React, { useCallback, useState } from "react";
function Practice() {
const [options, setOptions] = useState([
{
name: "Select…",
value: null,
},
{
name: "Rui",
value: 3000,
},
{
name: "Catla",
value: 3000,
},
{
name: "Carpio",
value: 3000,
},
{
name: "Tilapia",
value: 1750,
},
{
name: "Mrigel",
value: 3000,
},
{
name: "Pabda",
value: 3500,
},
{
name: "Koi",
value: 750,
},
]);
const [value, setValue] = useState("?");
const handleChange = useCallback((e) => {
setValue(e.target.value);
}, []);
return (
<>
<select onChange={handleChange} value={value}>
{options.map((item) => (
<option key={item.value} value={item.value}>
{item.name}
</option>
))}
</select>
<p>Oxygen Demand: {value}</p>
</>
);
}
export default Practice;

Answer 2

Convert like this:
import React, { useState, PureComponent, Fragment } from 'react';
let Practice = (praps) =>
let [options,soptions] = useState([
{
name: 'Select…',
value: null,
},
{
name: 'Rui',
value: 3000,
},
{
name: 'Catla',
value: 3000,
},
{
name: 'Carpio',
value: 3000,
},
{
name: 'Tilapia',
value: 1750,
},
{
name: 'Mrigel',
value: 3000,
},
{
name: 'Pabda',
value: 3500,
},
{
name: 'Koi',
value: 750,
},
]);
let [value,svalue]=useState('?')
let handleChange = (e) => {
svalue(e.target.value);
};
render() {
return (
<Fragment>
<select onChange={this.handleChange} value={value}>
{options.map(item => (
<option key={item.value} value={item.value}>
{item.name}
</option>
))}
</select>
<p>Oxygen Demand: {value}</p>
</Fragment>
);
} }
export default Practice;