how to remove + symbol from phone number using reactjs

Question

My objective is to remove + symbol from the phone number and store the respective phone number in another variable.

class App extends Component {
this.state={
phone: '',
renumber: ''
}

componentDidMount() {
  axios.get('/api/phone')
  .then(response => {
    console.log(response.data);
this.setState({phone: response.data}) //I want to remove + symbol from variable `phone - +78945612301` and then save it to `renumber variable - 78945612301`
  })
  .catch(error => {
    console.log(error);
  });
}

withoutSign = () => {
let num = this.state.phone.replace('+', ' ') 
this.setState({renumber: num})
}

render(){
return(
<div>{this.state.phone} </div>
<div>{this.state.renumber} </div>
);
}
}

Can anyone help me in getting phone number without + symbol

Answer 1

Try this it will work and hope it will solve your problem

    withoutSign = () => {
       let num = this.state.phone.replace(/\+/g,"");
       this.setState({renumber: num})
    }

Answer 2

Issues

• Initial state outside constructor is just a class instance, i.e. state vs this.state
• Convert withoutSign to consume a string and simply return the converted string value for inline use
• Setting state is this.setState

Solution

class App extends Component {
  state = {
    phone: "",
    renumber: ""
  };

  componentDidMount() {
    axios
      .get("/api/phone")
      .then(response => {
        console.log(response.data);
        this.setState({
          phone: response.data,
          renumber: this.withoutSign(response.data),
        });
      })
      .catch(error => {
        console.log(error);
      });
  }

  withoutSign = phone => phone.replace("+", " ");

  render() {
    return (
      <div>
        <div>{this.state.phone}</div>
        <div>{this.state.renumber}</div>
      </div>
    );
  }
}