reactjs - Use Hook to populate state in React

Question

I am trying to use Hook to populate state in below way.

class CreateService extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      serviceToUSe: []
    };
  }


  useEffect(() => {
    if (window.location.hostname == 'myhost') {
        this.setState({ serviceToUSe: require('../public/service/myhost.com.json') })
    } else {
      this.setState({ serviceToUSe: require('../public/service/default.json') })
    }
    });
  
}

I would like to populate serviceToUSe at the time of loading the component. But I am getting error.

Answer 1

You cannot use Hooks in a class component. Hooks are to be used only in Functional Component

const CreateService = () => {

  const [serviceToUse, setServiceToUse] = useState([])
   


  useEffect(() => {
    if (window.location.hostname == 'myhost') {
      setServiceToUse([require('../public/service/myhost.com.json'])
    } else {
      setServiceToUse([require('../public/service/default.json')])
    }
  }, []);
  
}

You syntax for hooks aren't correct either. Learn more about Hooks