1

I'm a beginner in react.js and I'm working on a small project right now. Here what I want to do is, once you double click on a text, it changes to a text box and allows you to enter some text. If you click on 'X', it displays the initial value and if you click on 'OK', it displays the edited value.

But I have a small problem. When I navigate back to the page after navigating to another, the value changes to the initial state. But I want to keep the edited value until I change it, not the initial value. How can I do that? Any help would be appreciated.

render() {
    return (
     <tr>
       <td>
        {this.state.isInEditMode ? this.editView() : this.defaultView()}
       </td>
     <tr>
    );
} 

    state = {
      value:"Some Text Here",
      isInEditMode:false
    }

    changeEditMode = () =>{
      this.setState({
        isInEditMode:!this.state.isInEditMode
      })
    }
    updateComponentValue = () =>{
      this.setState({
        isInEditMode:false,
        value:this.refs.theTextInput.value
      })
    }

    editView = () =>{
     return <div>
       <input type="text" defaultValue={this.state.value} ref="theTextInput"/>
       <button onClick={this.changeEditMode}>X</button>
       <button onClick={this.updateComponentValue}>OK</button>
       </div>
    }
    defaultView = () =>{
      return <div onDoubleClick={this.changeEditMode}>{this.state.value}</div>
    }

ref :https://www.youtube.com/watch?v=WTh54FMNrbU

This is my App.js file.

import React, { Component } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import { BrowserRouter as Router, Switch, Route, Link} from 'react-router-dom';

import deliveryDetails from './components/deliveryDetails.component';
import Index from './components/index.component';

class App extends Component {
  render() {
    return (
      <Router>
        <div className="container">
          <nav className="navbar navbar-expand-lg navbar-light bg-light">
            <Link to={'/'} className="navbar-brand">Payment</Link>
            <div className="collapse navbar-collapse" id="navbarSupportedContent">
              <ul className="navbar-nav mr-auto">
                <li className="nav-item">
                <Link to={'/create'} className="nav-link">Create</Link>
                </li>
                <li className="nav-item">
                  <Link to={'/index'} className="nav-link">Index</Link>
                </li>
              </ul>
            </div>
          </nav> <br/>
          <Switch>
              <Route exact path='/create' component={ deliveryDetails } />              
              <Route path='/index' component={ Index } />
          </Switch>
        </div>
      </Router>
    );
  }
}

export default App;

The above edittable text is in index route. It's value changes to default when I navigate back to index route from create route.

Savindri Perera
  • 23
  • 1
  • 1
  • 8

2 Answers2

0

at defaultView()=> {} set the state with this.setState to the value you want to have

Reactord
  • 96
  • 1
  • 11
  • 2
    Hey, thanks for the answer! Could you give a bit of explanation? It would help OP and future readers :) – xShirase Oct 17 '20 at 23:46
0

If you are navigation through:

window.location.href = '/YOUR_ROUTE';

Then your state will reset every time you navigate to another page, and the isInEditMode variable will return to default (false), not showing the input. I recommend you trying react-router. There's a better explanation in another thread

https://stackoverflow.com/a/52726411/12705405

But basically, you should use history navigation, to keep your state in pages from resetting:

this.props.history.push('/YOUR_ROUTE');
Lucas Zawadneak
  • 26
  • 4