CODEWITHSUNDEEP
javascriptreactjsmeteor
Aboobakkar P S
Aboobakkar P S

Reputation: 806

Uncaught TypeError: Cannot read property 'value' of null (React js component id passing other component)

I have a Textbox Component 

import React,{ Component } from 'react';
export default class Textbox extends Component {
      render() {   return (<input /> )}
    }

And Another Component snippest is 

import Textbox from '../forms/Textbox.jsx'

export default class LoginPage extends Component {
  render(){

return (
   <Textbox type="tel" id="login-mobile" required/>

 )}
}

The console show input from id is null ,And the HTML view is 

<input class="not-empty">

Upvotes: 1

Views: 1425

Answers (2)

Mayank Shukla
Mayank Shukla

Reputation: 104529

I think this will help you:

Props and state are related. The state of one component will often become the props of a child component. Props are passed to the child like this:

<MyChild name={this.state.childsName} />

The parent's state value of childsName becomes the child's this.props.name. From the child's perspective, the name prop is immutable. A natural follow-on question is: what if the child needs to change its name prop? This is usually done through child events and parent callbacks. The child might expose an event called, for example, onNameChanged. The parent would then subscribe to the event by passing a callback handler.

<MyChild name={this.state.childsName} onNameChanged={this.handleName} />

The child would pass it's requested new name as an argument to the event callback by calling, e.g., this.props.onNameChanged('New name'), and the parent would use the name in the event handler to update its state.

handleName: function(newName) {
   this.setState({ childsName: newName });
}

Upvotes: 1

Luk&#225;š Unzeitig
Luk&#225;š Unzeitig

Reputation: 439

I am not sure what are u trying, but u sending id like props, to component TextBox, so if u want to send the id to Textbox via props, u have to set in Textbox render - <input id={this.props.id} /> U should set id/type right in <input id=.. type=.../> and not in render of LoginPage. Entire code looks - 

import Textbox from '../forms/Textbox.jsx'

export default class LoginPage extends Component {
  render(){

return (
   <Textbox type="tel" id="login-mobile"/>

 )}
}

and Textbox -

 import React,{ Component } from 'react';
    export default class Textbox extends Component {
          render() {   return (<input id={this.props.id} type={this.props.type} /> )}
        }

Upvotes: 2

Related Questions