ReactJS Calling an API and rendering results I am currently learning JS Frameworks, right now exploring React and wanted to make sure I keep everything in order, as in: the logic of working with React, code quality, any shortcomings, good/bad practices etc?

The code renders a simple Search panel that will allow to call an API, get the results (if any) and render the results on the page.

import React from "react";
import "./App.css";
import axios from "axios";

var Style = {
  marginRight: "22px"
};

var Style2 = {
  display: "none"
};

const API_CALL = "xxx";

class SearchForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: "",
      errorValue: "",
      countryCode: "",
      VATNumber: "",
      valid: "",
      name: "",
      address: "",
      isLoading: false,
      isSubmitted: false
    };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  renderField() {
    return (
      &lt;form onSubmit={this.handleSubmit}&gt;
        &lt;label style={Style}&gt;Search VAT:&lt;/label&gt;
        &lt;input type="text" onChange={this.handleChange} style={Style} /&gt;
        &lt;input type="submit" value="Submit" /&gt;
      &lt;/form&gt;
    );
  }

  render() {
    return (
      &lt;div&gt;
        &lt;h5&gt;Reference: EE100247019&lt;/h5&gt;
        {this.renderField()}
        &lt;div id="results" /&gt;
        &lt;Loader loading={this.state.isLoading} /&gt;
        {this.state.isSubmitted &amp;&amp; (
          &lt;Result
            country={this.state.countryCode}
            number={this.state.VATNumber}
            name={this.state.name}
            address={this.state.address}
            error={this.state.errorValue}
            valid={this.state.valid}
            loading={this.state.isLoading}
          /&gt;
        )}
      &lt;/div&gt;
    );
  }

  handleChange(event) {
    this.setState({ value: event.target.value.trim() });
  }

  handleSubmit(event) {
    this.setState({ isLoading: true, isSubmitted: false });
    Style2 = {
      listStyleType: "none",
      textAlign: "left",
      display: "block",
      border: "1px solid white",
      marginTop: "50px"
    };
    axios
      .get(API_CALL + this.state.value)
      .then(res =&gt;
        this.setState({
          countryCode: res.data.CountryCode,
          VATNumber: res.data.VATNumber,
          name: res.data.Name,
          address: res.data.Address,
          valid: res.data.Valid,
          isLoading: false,
          isSubmitted: true
        })
      )
      .catch(error =&gt;
        this.setState({
          valid: false,
          errorValue: this.state.value,
          isLoading: false,
          isSubmitted: true
        })
      );

    event.preventDefault();
  }
}

function Loader(props) {
  if (!props.loading) {
    return null;
  }
  return &lt;h6&gt; Loading ... &lt;/h6&gt;;
}

function Result(props) {
  if (!props.valid) {
    return (
      &lt;h5&gt;
        Invalid value "{props.error}"
        &lt;br /&gt; &lt;br /&gt;
        Please enter valid VAT Number
      &lt;/h5&gt;
    );
  } else {
    return (
      &lt;table style={Style2}&gt;
        &lt;tr&gt;
          &lt;td&gt;Country code: &lt;/td&gt;
          &lt;td&gt;{props.country}&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;VAT Number: &lt;/td&gt;
          &lt;td&gt;{props.number}&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;Product name: &lt;/td&gt;
          &lt;td&gt;{props.name}&lt;/td&gt;
        &lt;/tr&gt;
        &lt;td&gt;Address: &lt;/td&gt;
        &lt;td&gt;{props.address} &lt;/td&gt;
      &lt;/table&gt;
    );
  }
}

export default SearchForm;
Here is the code after refactor some changes that i think should be good to follow:


use let instead of var.
I have used style2 as a state as its changing.
Used arrow function instead of bind.
Prefer destructuring.



import React from "react";
import "./App.css";
import axios from "axios";

let Style = {
  marginRight: "22px"
};

const API_CALL = "xxx";

class SearchForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: "",
      errorValue: "",
      countryCode: "",
      VATNumber: "",
      valid: false,
      name: "",
      address: "",
      isLoading: false,
      isSubmitted: false,
      Style2: { display: "none" }
    };
  }

  renderField() {
    return (
      &lt;form onSubmit={this.handleSubmit}&gt;
        &lt;label style={Style}&gt;Search VAT:&lt;/label&gt;
        &lt;input type="text" onChange={this.handleChange} style={Style} /&gt;
        &lt;input type="submit" value="Submit" /&gt;
      &lt;/form&gt;
    );
  }

  render() {
    const {
      Style2 = {},
      countryCode = "",
      VATNumber = "",
      valid = false,
      name = "",
      address = "",
      isLoading = false,
      isSubmitted = false,
      errorValue = ""
    } = this.state;
    return (
      &lt;div&gt;
        &lt;h5&gt;Reference: EE100247019&lt;/h5&gt;
        {this.renderField()}
        &lt;div id="results" /&gt;
        &lt;Loader loading={isLoading} /&gt;
        {isSubmitted &amp;&amp; (
          &lt;Result
            country={countryCode}
            number={VATNumber}
            name={name}
            address={address}
            error={errorValue}
            valid={valid}
            loading={isLoading}
            style={Style2}
          /&gt;
        )}
      &lt;/div&gt;
    );
  }

  handleChange = event =&gt; this.setState({ value: event.target.value.trim() });

  handleSubmit = event =&gt; {
    this.setState(({ Style2 }) =&gt; ({
      isLoading: true,
      isSubmitted: false,
      Style2: {
        ...Style2,
        listStyleType: "none",
        textAlign: "left",
        display: "block",
        border: "1px solid white",
        marginTop: "50px"
      }
    }));
    axios
      .get(API_CALL + this.state.value)
      .then(
        ({
          data: {
            CountryCode = "",
            VATNumber = "",
            Name = "",
            Address = "",
            Valid = false
          } = {}
        } = {}) =&gt;
          this.setState({
            countryCode: CountryCode,
            VATNumber: VATNumber,
            name: Name,
            address: Address,
            valid: Valid,
            isLoading: false,
            isSubmitted: true
          })
      )
      .catch(error =&gt;
        this.setState({
          valid: false,
          errorValue: this.state.value,
          isLoading: false,
          isSubmitted: true
        })
      );

    event.preventDefault();
  };
}


const Loader = ({ loading = false } = {}) =&gt;
  loading ? null : &lt;h6&gt; Loading ... &lt;/h6&gt;;

const Result = ({
  valid = false,
  error = "",
  style = {},
  country = "",
  number = "",
  name = "",
  address = ""
} = {}) =&gt; {
  if (!valid) {
    return (
      &lt;h5&gt;
        Invalid value "{error}"
        &lt;br /&gt; &lt;br /&gt;
        Please enter valid VAT Number
      &lt;/h5&gt;
    );
  } else {
    return (
      &lt;table style={style}&gt;
        &lt;tr&gt;
          &lt;td&gt;Country code: &lt;/td&gt;
          &lt;td&gt;{country}&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;VAT Number: &lt;/td&gt;
          &lt;td&gt;{number}&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;Product name: &lt;/td&gt;
          &lt;td&gt;{name}&lt;/td&gt;
        &lt;/tr&gt;
        &lt;td&gt;Address: &lt;/td&gt;
        &lt;td&gt;{address} &lt;/td&gt;
      &lt;/table&gt;
    );
  }
}


export default SearchForm;