React: How to build a string with state values?

Question

i am new to React and i try to create a URL-String for consuming a API. Here is a minimalistic code snippet:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css"

class Unternehmenseinstellungen extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            uname: ""
        };
        this.handleUName = this.handleUName.bind(this);
    }
    
    handleUName(e) {
        this.setState({uname: e.target.value});
    }
    
     Unternehmensenden() {
        if (document.getElementById("uname").value === "") {
            alert("Please fill all fields");
        }
        else {
            var apiEndpoint = "http://localhost:8080/erstelleUnternehmen?uname=" + this.state.uname;
            alert(apiEndpoint)

        }
    }
    
    render() {
        return (
        <div>
            <div>
              <input placeholder="e.g. Bike company"
                                       value={this.state.uname}
                                       onChange={this.handleUName}
                                       style={{...}}
                                       type="text" id="uname" required/>
                        
            </div>

            <button
                style={{...}}
                className="btn btn-pill btn-dark" onClick={this.Unternehmensenden}>Show my state                              
            </button>
            <div>
              <h3>State-Test:</h3>
              <p>Name: {this.state.uname}</p>
            </div>
        </div>
        );
    }
}

If i render this component, my "State-Test" is working and shows me my text that i write in the input box. But if i call my function "Unternehmensenden" the alert in the else condition always get an Error with the message "TypeError: Cannot read property 'state' of undefined".

What is the Reason for this? Did i have forgotten something?

You need to do the same thing to `Unternehmensenden` in the constructor that you do to `handleUName`. — T.J. Crowder, Jan 22 '21 at 15:39

score 1 · Answer 1 · answered Jan 22 '21 at 15:41

1

You should bind your Unternehmensenden function in the constructor or use an arrow function

answered Jan 22 '21 at 15:41

asmaa

715
5
15

1

This is a ***constantly*** repeated duplicate question. There's no reason to post an answer, the topic is extremely well covered by [various](https://stackoverflow.com/questions/33973648/react-this-is-undefined-inside-a-component-function) [canonicals](http://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-context-inside-a-callback). – T.J. Crowder Jan 22 '21 at 15:45

score 1 · Accepted Answer · answered Jan 22 '21 at 15:41

there is need to fix this reference, try this code:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css"

class Unternehmenseinstellungen extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            uname: ""
        };
        this.handleUName = this.handleUName.bind(this);
        this.unternehmensenden = this.unternehmensenden.bind(this);
    }
    
    handleUName(e) {
        this.setState({uname: e.target.value});
    }
    
    unternehmensenden() {
        if (document.getElementById("uname").value === "") {
            alert("Please fill all fields");
        }
        else {
            var apiEndpoint = "http://localhost:8080/erstelleUnternehmen?uname=" + this.state.uname;
            alert(apiEndpoint)

        }
    }
    
    render() {
        return (
        <div>
            <div>
              <input placeholder="e.g. Bike company"
                                       value={this.state.uname}
                                       onChange={this.handleUName}
                                       style={{...}}
                                       type="text" id="uname" required/>
                        
            </div>

            <button
                style={{...}}
                className="btn btn-pill btn-dark" onClick={this.unternehmensenden}>Show my state                              
            </button>
            <div>
              <h3>State-Test:</h3>
              <p>Name: {this.state.uname}</p>
            </div>
        </div>
        );
    }
}

This is a ***constantly*** repeated duplicate question. There's no reason to post an answer, the topic is extremely well covered by [various](https://stackoverflow.com/questions/33973648/react-this-is-undefined-inside-a-component-function) [canonicals](http://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-context-inside-a-callback). — T.J. Crowder, Jan 22 '21 at 15:45

React: How to build a string with state values?

2 Answers2