CODEWITHSUNDEEP
reactjs
Pacman
Pacman

Reputation: 2245

React equivalent to ng-model

New to React, I have a TextField that I want to "bind" a value to it, I want it to change the value if the user enters value into the TextField and update the TextField if the value change through some API call.

Is there a way to do it ?

Upvotes: 14

Views: 13748

Answers (5)

juantxo_kupul
juantxo_kupul

Reputation: 11

This is pretty straightforward using useState React Hook and TextInput

import { useState } from "react";
import { TextInput, Text, View } from "react-native";

const App = () => {
  const [text, setText] = useState("hello");

  return (
    <View>
      <TextInput value={text} onChangeText={setText} />
      <Text>Text value: {text}</Text>
    </View>
  );
};

export default App;

See it working here

Upvotes: 0

Thibaud Granier
Thibaud Granier

Reputation: 390

The same thing with React hook

import React,{useState} from 'react';

export default MyForm = () => {
  const [text, setText] = useState('default')
  const [text2, setText2] = useState('default')

  return (
    <div>
      <input type="text" name="text" value={text} onChange={(e)=> setText(e.target.value)} />
      <input type="text" name="text2" value={text2} onChange={(e)=> setText2(e.target.value)} />
    </div>
  )
}

Upvotes: 1

Amine Tabou
Amine Tabou

Reputation: 36

Two ways data binding in angular work out of the box by using ngModal directive

NgModal: Creates a FormControl instance from a domain model and binds it to a form control element

import {Component} from '@angular/core'; 
@Component({
  selector: 'example-app',
  template: `
    <input [(ngModel)]="name" #ctrl="ngModel" required>

    <p>Value: {{ name }}</p>
    <p>Valid: {{ ctrl.valid }}</p>

    <button (click)="setValue()">Set value</button>
  `,
})
export class SimpleNgModelComp {
  name: string = '';

  setValue() { this.name = 'Nancy'; }
}

In ReactJS, we don't have such a built-in option to handle two ways data binding, you need to use the state and add an onChange event to the input. React Controlled Input allow us to implement data binding in React: we bind a value to a state variable and an onChange event to change the state as the input value changes.

Refer to the below snippet:

class App extends React.Component {
  constructor() {
    super();
    this.state = {name : ''}
  }
  handleChange = (e) =>{ 
    this.setState({name: e.target.value});
  }
  render() {
    return (
    <div>
        <input type="text" value={this.state.name} onChange={this.handleChange}/>
        <div>{this.state.name}</div>
    </div>
   )
  }
}
ReactDOM.render(<App/>, document.getElementById('app'));

Upvotes: 0

TheRealMrCrowley
TheRealMrCrowley

Reputation: 976

The way to do this in React is with state. Here's an example in JSX:

import React from 'react';

export default class MyForm extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      text: 'default',
      text2: 'default'
    }
  }

  onChange(e) {
    var obj[e.target.name] = e.target.value
    this.setState(obj);
  }

  render() {
    return (
      <div>
        <input type="text" name="text" value={this.state.text} onChange={this.onChange} />
        <input type="text" name="text2" value={this.state.text2} onChange={this.onChange} />
      </div>
    );
  }
}

Upvotes: 5

Aneesh Ashutosh
Aneesh Ashutosh

Reputation: 772

You can do this using state and onChange. Simple example included below:

<TextField
  onChange={(name) => this.setState({name})}
  value={this.state.name}
/>

A guide for updating TextInput based on a variable is located in the docs.

Upvotes: 14

Related Questions