Writing a constructor in React.js

You can use a constructor when you need access to props passed to component. You can read more about constructors here.

I added changes to your snippets so your code is more readable. Here are some of them explained:

1) If you are using ES6 classes you don't have to bind this in your functions.

2) It is considered best practice your state variables to be named starting with lowercase since the components are starting with uppercase and it could be confusing.

3) Instead of using setState in componentDidMount you can get the props in your constructor and set state value to equal a prop variable.

4) Destructuring phoneNumber value from props can be accessed only from phoneNumber instead of this.state.phoneNumber.

PhoneNumber.js

import React from 'react';
import './PhoneNumber.css';
import { NavLink } from 'react-router-dom';

class PhoneNumber extends React.Component {
    state = {
        phoneNumber: null,
    }
    savePhone = (event) => {
        this.setState({ phoneNumber: event.target.value })
    }

    render() {
        const { phoneNumber } = this.state;
        return (
            <div className="phonebar">
                <input type="number" value={phoneNumber} onChange={this.savePhone} min="0" max="9" placeholder="Enter your phone number" />
                <NavLink to={`../SignUp/${phoneNumber}`}  ><button className="PhoneButton">Continue</button></NavLink>
            </div>
        )
    }
}

export default PhoneNumber;

SignUp.js

import React from 'react';
import './SignUp.css';
import TopMenu from '../TopMenu/TopMenu';

class SignUp extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            phoneNumber: props.match.params.contact || "" ,
        }
    }

    setPhone = (event) => {
        this.setState({ phoneNumber: event.curr.value })
    }

    register = () => {
        alert("register succesfiully")
    }

    handlePhone = (event) => {
        this.setState({ phoneNumber: event.currentTarget.value })
    }

    render() {
        const { phoneNumber } = this.state;
        return (
            <div class="container">
                <div class="underlay">
                    <TopMenu />
                </div>
                <div class="header">
                    <h2>Registration</h2> <br /><h4>Please complete the form with your details</h4>
                    <hr />
                </div>
                <div class="reg_form">
                    {/* <input type="number" value={phoneNumber} onChange={this.handlePhone} placeholder="Enter your Phone Number" required /> */}
                    <input type="number" name="Phone Number" value={phoneNumber} onChange={this.handlePhone} maxlength="11" placeholder="Enter your Phone Number" autocomplete="on" required />
                    {/* <input type="number" name="Phone Number" value={this.state.phoneNumber} onChange={this.setPhone} maxlength="11" placeholder="Enter your Phone Number" autocomplete="on" autofocus required /> */}
                    <input type="text" name="FirstName" placeholder="Enter your First Name" required />
                    <input type="text" name="LastName" placeholder="Enter your Last Name" autocomplete="on" required />
                    <input type="email" name="EmailAddress" placeholder="Enter your Email Address." autocomplete="on" required />
                    <input type="text" name="Meter Number" max="9" placeholder="Enter your Meter Number" autocomplete="on" required />
                    <input type="password" name="Password" placeholder="Enter your Password" required />
                    <select id="disco" name="disco" required>
                        <option value="australia">Select disco</option>
                        <option value="canada">Eko Electric</option>
                        <option value="usa">ADEC</option>
                    </select>
                    <button onClick={this.register}>Continue</button>
                </div>
            </div>
        )
    }
}


export default SignUp;