How to send react native text field value as JSON.stringify

Question

I have code like this:-

export default class TextField extends Component {
  constructor(props) {
    super(props);
    this.state = {
      userID: '',
      userName: '',
      userGmail: '',
      userTNumber: '',
    };
  }
  addCustomer = () => {
    fetch('http://localhost:3000/send-data', {
      method: 'post',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({}),
    });
  }         <TextInput
            style={styles.inputText}
            placeholder="User ID :"
            placeholderTextColor="#ffff"
            onChangeText={userID => this.setState({userID})}
            value={this.state.userID}
            autoCapitalize="none"
          />
        </View>
}

I Need To Send My Text Input To My Node BackEnd... I Don't Know How To Send My Data Using This Fetch Function

**

addCustomer = () => {
    fetch('http://localhost:3000/send-data', {
      method: 'post',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({}),
    });
  };

**

I Don't Know How To Put My Text Input Into,

 body: JSON.stringify({}),

This Is My BackEnd To Post My Data:-

app.post('/send-data', (req, res) => {
  const customer = new Customer({
    userID: req.body.userID,
    userName: req.body.userName,
    userGmail: req.body.userGmail,
    userTNumber: req.body.userTNumber,
  });
  customer
    .save()
    .then(result => {
      console.log(result);
      res.send(result);
    })
    .catch(err => {
      console.log(err);
    });
});

Can You Help Me ..? ThankYou..!

How do you expect to receive the data in your back-end? How should it be structured? Please update the post with an example for some valid request payload. — Eyal
– Eyal, Commented May 23, 2021 at 21:21

Eyal · Accepted Answer · 2021-05-23 21:39:09Z

If I understood correctly, you want to pass your data in the following format:

{
  "userID": 1,
  "userName": "John Doe",
  "userGmail": "[email protected]",
  "userTNumber": "1234"
}

You want to use the data from your state and pass it to the fetch function, like so:

export default class TextField extends Component {
  constructor(props) {
    super(props)

    this.state = {
      userID: "",
      userName: "",
      userGmail: "",
      userTNumber: "",
    }
  }

  addCustomer = () => {
    const { userID, userName, userGmail, userTNumber } = this.state

    fetch("http://localhost:3000/send-data", {
      method: "post",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({ userID, userName, userGmail, userTNumber }),
    })
  }

  render() {
    return (
      <TextInput
        style={styles.inputText}
        placeholder="User ID :"
        placeholderTextColor="#ffff"
        onChangeText={(userID) => this.setState({ userID })}
        value={this.state.userID}
        autoCapitalize="none"
      />
    )
  }
}

Collectives™ on Stack Overflow

How to send react native text field value as JSON.stringify

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related