I am trying to render some elements to take some inputs and pass them to my backend but unfortunately the render method isn't working at all all I get is a blank page when I start my react session

import React, {useState} from "react";
import { Link } from "react-router-dom";
import axios from "axios";
import { useHistory } from "react-router-dom";
import { Component } from "react";

export default class user_update_info extends Component{
    constructor(props){
        super(props);

        this.onChangeEmail = this.onChangeEmail.bind(this);
        this.onChangePassword = this.onChangePassword.bind(this);
        this.onChangeName = this.onChangeName.bind(this);
        this.onChangeType = this.onChangeType.bind(this);

        this.state =
        {
            Name:'',
            Email:'',
            Password:'',
            Type:''
        }
    }

onChangeName(e) {
    this.setState({
        Name: e.target.value

    });
}

onChangeEmail(e) {
    this.setState({
        Email: e.target.value

    });
}

onChangePassword(e) {
    this.setState({
        Password: e.target.value

    });
}

onChangeType(e) {
    this.setState({
        Type: e.target.value

    });
}

onSubmit(e){
    e.PreventDefault();
    const user = {
        Name = this.state.Name,
        Email = this.state.Email,
        Password = this.state.Password,
        Type = this.state.Type

    }
    console.log(user)
    window.location = '/SignIn';
}

render(){
return(
    <div>
    <h3>You are updating your info</h3>
    <form OnSubmit = {this.OnSubmit}>
        <div className = "form-group">
            <label>
                Name:
            </label>
            <input type = "text" required className="form-control" value={this.state.Name} onChange={this.onChangeName}/>

            
        </div>

        <div className = "form-group">
            <label>
                Emaile:
            </label>
            <input type = "text" required className="form-control" value={this.state.Email} onChange={this.onChangeEmail}/>

            
        </div>



        <div className = "form-group">
            <label>
                Password:
            </label>
            <input type = "text" required className="form-control" value={this.state.Passworde} onChange={this.onChangePassword}/>

            
        </div>


        <div className = "form-group">
            <label>
                Type:
            </label>
            <input type = "text" required className="form-control" value={this.state.Type} onChange={this.onChangeType}/>

            
        </div>




    
    
    </form>
    </div>
)

}
}

export default update_info;

I do not know what is the problem with that code or why it is not rendering the components inside it when starting the react session

Can anyone help me to solve this problem why is my page blank while I'm rendering components inside it.

CodePudding user response：

You have a few errors, not sure if this helps at all. But at least it is rendering now. I don't know why you were binding those elements without using them anywhere. But here it shows that props has the functions that can be passed through it as props. and I am console logging the props in the render function. Hopefully this helps a little. It is hard to know exactly what you are trying to do without more information.

class Update_info extends React.Component {
  constructor(props) {
    super(props);
  }
  
  render() {
    return (
      <div>
        {console.log(this.props)}
        <h3>You are updating your info</h3>
      </div>
    )
  }
}

ReactDOM.render(
  <React.StrictMode>
    <Update_info 
      onChangeEmail={()=>{}} 
      onChangePassword={()=>{}}
      onChangeName={()=>{}}
      onChangeType={()=>{}} 
    />
  </React.StrictMode>,
  document.querySelector('.react')
);

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class='react'></div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>