Answers for "convert class to functional component online"

convert app function to class component react native

const App = () => (
  <div>
  	<p>
  		test
  	</p>
  </div>
);

// to convert the above to a class component: 

class App extends Component {
  render() {
    return (
      <div>
      	<p>
      		test
      	</p>
      </div>
    );
  }
}

class to functional component react

// convert a class component to a functional component
class MyComponent extends React.Component {
	state: { 
      name: 'Bob' 
    }
	render() {
      return (
        <p>Hello, my name is {this.state.name}</p>
      );
    }
}

const MyComponent = () => {
  const [name, setName] = React.useState('Bob');
  return (<p>Hello, my name is {name}</p>);
}

convert class to functional component online

import React, { Component } from "react";
import { InputGroup, FormControl, Input } from "react-bootstrap";

class SimpleKeyEvent extends Component {
  constructor() {
    super();
    this.state = {
      name: "React-bootstrap key enter event"
    };
    this.onKeyUp = this.onKeyUp.bind(this);
  }

  onKeyUp(event) {
    if (event.charCode === 13) {
      this.setState({ inputValue: event.target.value });
    }
  }

  render() {
    const { inputValue } = this.state;

    return (
      <div>
        <InputGroup>
          <FormControl placeholder="First name" onKeyPress={this.onKeyUp} />
        </InputGroup>
        <hr />
        <span>Input value is : {inputValue}</span>
      </div>
    );
  }
}

export default SimpleKeyEvent;

convert class to functional component online

import React, { Component } from 'react'

export class MultipleCheckBox extends Component {

    state={
        Colornames:{
            first:false,
            second:false,
            third:false
        }
    }
    checkBoxClick = (e) => {
        let {name, checked} = e.target;
        this.setState((e) => {
            let selectedSport=e.Colornames;
            return selectedSport[name]=checked;
        })
    }
    
    render() {

        // let displaySports=Object.keys(this.state.Colornames).filter((x)=> this.state.Colornames[x])
        return (
            <div>
                <div>
                    <h1>
                        gfghfh
                    </h1>
                    <label htmlFor="foo">first</label>
                    <input type="checkbox" name="first" id="foo" onChange={this.checkBoxClick}/>
                    <label htmlFor="bar">second</label>
                    <input type="checkbox" name="second" id="bar" onChange={this.checkBoxClick}/>
                    <label htmlFor="coo">third</label>
                    <input type="checkbox" name="third" id="coo" onChange={this.checkBoxClick}/>
                    <hr/>
                    {/* <div style={{backgroundColor: "black", color: "cyan"}}>
                        {displaySports+" "}
                    </div> */}
                </div>
            </div>
        )
    }
}

export default MultipleCheckBox

convert class to functional component online

class Question extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange(e) {
    e.preventDefault();
    this.props.onChoiceChange(e.target.value);
  }
  render() {
      const question = this.props.question;
      return(
        <div className="well">
          <h3>{question.text}</h3>
          <hr />
          <ul className="list-group">
            {
              question.choices.map(choice => {
                return (
                  <li className="list-group-item" key={choice.id}>
                    {choice.id} <input type="radio" onChange={this.handleChange} name={question.id} value={choice.id} /> {choice.text}
                  </li>
                )
              })
            }
          </ul>
        </div>
      )
  }
}