We Keep Coding

react-router and typescript throwing "Can't resolve 'react-router-dom'" error

As I am new to react and typescript this is probably a simple mistake, but I have checked other answers I found about this and nothing has worked. I would appreciate any help and an explanation of what I am doing wrong so I can learn. I cannot seem to get react-router to work with typescript at all. It keeps throwing an error that it "can't resolve react-router-dom" in the following code. I attempted to follow a basic tutorial for react-router and typescript I found here:
https://riptutorial.com/react-router/example/30226/basic-routing
So basically what I want to happen is for the login screen to come up with Username and Password fields to pop up and a submit button underneath it. Then underneath that I have a link that they can click on to register if they don't already have an account, which will take them to another page.
I will put the Register class in its own file and import it once this works, I just didn't want to have to show two different files for the example:
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import TextField from '#material-ui/core/TextField';
import Button from '#material-ui/core/Button';
import { Alert } from 'react-bootstrap';
interface IState {
[key: string]: any; // or the type of your input
}
const styles = {
background: 'lightblue'
};
export class Login extends React.Component<{}, IState> {
constructor(props) {
super(props);
this.state = {
username: '',
password: '',
authorized: false
};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
const target = event.target;
const value = target.value;
const name = target.name;
this.setState({
[name]:value
});
}
handleSubmit(event) {
//TODO: we are going to submit the form to the database
event.prevent.default();
}
render() {
return (
<div>
<form noValidate autoComplete="off" onSubmit={this.handleSubmit} style={{ textAlign: 'center' }}>
<TextField
id="username"
name="username"
label="UserName"
helperText="Enter your Username"
value={this.state.username}
onChange={this.handleChange}
required={true}
style={styles}
/>
<br />
<TextField
id="password"
name="password"
type="password"
helperText="Enter your password"
label="Password"
onChange={this.handleChange}
required={true}
style={styles}
/>
<br />
<br />
<br/>
<Button
type="submit"
value="Submit"
variant="contained"
color="primary"
>Submit</Button>
<br />
<br/>
<Alert variant="info">
<Alert.Heading>Don't Have An Account Setup?</Alert.Heading>
<div>
<Link to="/register">Register Here</Link>
</div>
</Alert>
</form>
</div>
)
}
}
class Register extends React.Component<{}, {}> {
render() {
return (
<div>
<h1>Register</h1>
</div>
)
}
}
ReactDOM.render(
<Router>
<div>
<Route path="/register" component={Register} />
</div>
</Router>
, document.getElementById('root'));

You just have to install the #types (#types/react-router-dom) that provide the types definition and install react-router-dom:
npm install -S react-router-dom #types/react-router-dom
or
yarn add react-router-dom #types/react-router-dom

You can use Redirect of react-router-dom to use redirect like below
import { Redirect} from 'react-router-dom'
render() {
if(condition===true){
return (
<Redirect to='/your-route-path' />
)
}
}

Routing in ReactJS. URL is displayed but component is not rendered

I have the following piece of code in my parent component:
class App extends Component {
render() {
return(
<Router>
<div>
<Route exact path='/' component={Main} />
<Route path="/login" component={Login} />
</div>
</Router>
);
}}
And this in Main component:
import React, { Component } from "react";
import {BrowserRouter as Router, Route, Link } from 'react-router-dom'
class Main extends Component {
render() {
return (
<Router>
<section className="section main">
<div className="container">
<div className="main-titles-container">
<div className="main-titles">
<div className="yellow-square"></div>
<h1>Title</h1>
<p>
Introduction
</p>
<div className="button-container">
<Link to='/login' className="btn select bg-yellow" id="buyer">Next</Link>
</div>
</div>
</div>
</div>
</section>
</Router>
);
}
}
export default Main;
Login:
import React, { Component } from 'react';
class Login extends React.Component {
constructor(props) {
super(props);
this.state = {
email: "",
cellphone: ""
}
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(e) {
const target = e.target;
this.setState({
[target.name]: target.value
});
}
handleSubmit(e) {
e.preventDefault();
console.log(this.state);
}
render() {
return (
<section className="section">
<div className="container center center-xy">
<h1 className="title center-self">Title</h1>
<h1 className="title center-self">Log in</h1>
<div className="form-container">
<form onSubmit={this.handleSubmit}>
<label htmlFor="email">Email</label>
<input type="text" name="email" id="email" onChange={this.handleChange} defaultValue="" required/>
<label htmlFor="cellphone">Cell phone</label>
<input type="text" name="cellphone" id="cellphone" defaultValue="" onChange={this.handleChange} required/>
<button className="bg-yellow center-self" type="submit">Ok</button>
</form>
</div>
</div>
</section>
);
}
}
export default Login;
On click I want to be redirected to Login page, but the problem is that when i click on that 'button' the URL is changed to '/login', but the corresponding component isn't rendered. However, if I refresh the page with that '/login' url the component is rendered.
Thanks for any help in advance!
EDIT: I'm not using PureComponent and wrapping exports in withRouter doesn't solve my problem too.

You should only have the top-level component (in your case, App) rendering the Router component. All of the components under that (ex. Main) should not have a Router in the render function. They will inherit the parent's Router. You can still use Link or Route components inside of the child components and they will navigate the parent Router.

React: updating parent state from nested children component

I'm working in a form with React. My idea is to create a reusable Form component that gets the state from a Page component as props, and will hold the logic for updating its own state with children data, send it to parent Page component.
The Page component is this:
class Page extends Component {
constructor(props) {
super(props);
this.state = {
data: {
text1: "Initial text1",
text2: "Initial text2"
}
};
}
render() {
return (
<div className="Page">
<div className="DataPreview">
Data preview in Page component
<div>{this.state.data.text1}</div>
<div>{this.state.data.text2}</div>
</div>
<Form data={this.state.data}>
<Input id="text1" data={this.state.data.text1} />
<Input id="text2" data={this.state.data.text2} />
</Form>
</div>
);
}
}
This is the Form component:
class Form extends Component {
constructor(props) {
super(props);
this.state = this.props.data;
}
render() {
return (
<div className="Parent">
<div>Form component</div>
<div className="DataPreview">
Data preview in Form component
<div>{this.state.text1}</div>
<div>{this.state.text2}</div>
</div>
{this.props.children}
</div>
);
}
}
And this the Input component:
class Input extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div className="Child" id={this.props.id}>
<div>Input component</div>
<input id={this.props.id} type="text" value={this.props.data} />
</div>
);
}
}
So Input should update Form state, and Form should update Page state. I know how to do it passing a callback when the Input is written Inside Form component, but I cant figure out how to do it when it is written inside Page component, like in this case.
I have a Sandbox for those interested: https://codesandbox.io/s/qx6kqypo09

class Input extends Component {
constructor(props) {
super(props);
}
handleChange(e) {
let data = this.props.this.state.data;
data.text1 = e.target.value;
this.props.this.setState({ data: data });
}
render() {
return (
<div className="Child" id={this.props.id}>
<div>Input component {this.props.id}</div>
<input
id={this.props.id}
type="text"
value={this.props.data}
onChange={e => this.handleChange(e)}
/>
</div>
);
}
}
use your input component as specified and your page component as mentioned below-
class Page extends Component {
constructor(props) {
super(props);
this.state = {
data: {
text1: "Initial text1",
text2: "Initial text2"
}
};
}
render() {
return (
<div className="Page">
<div className="DataPreview">
Data preview in Page component
<div>{this.state.data.text1}</div>
<div>{this.state.data.text2}</div>
</div>
<Form data={this.state.data}>
<Input id="text1" this={this} data={this.state.data.text1} />
<Input id="text2" data={this.state.data.text2} />
</Form>
</div>
);
}
}
I think this will help you
Thanks

As #dashton said, I am holding the same state in different components, and that's not correct. I will look for a different approach instead using only Form component state, and sharing logic via composition. I will open a new question for this.

without using some kind of state management, you would need to create a method that handles the state change in the parent component that you would then pass down to your child component a a prop.
Once you call that method in the child component it will update the state of the parent component.

This is one way of doing what you want to achieve: passing a callback handler for onChange. But, when your app starts to get bigger things can be ugly :) If you are thinking about creating a complex reusable Form component maybe you can examine the present node packages.
An alternative to this method, if you need a simple one, you can study React Context a little bit. It can help you maybe. Other than that Redux or other global state management libraries can do this also.
class Page extends React.Component {
state = {
data: {
text1: "Initial text1",
text2: "Initial text2",
},
};
handleChange = ( e ) => {
const { name, value } = e.target;
this.setState( prevState => ( {
data: { ...prevState.data, [ name ]: value },
} ) );
}
render() {
return (
<div className="Page">
<div className="DataPreview">
Data preview in Page component
<div>{this.state.data.text1}</div>
<div>{this.state.data.text2}</div>
</div>
<Form data={this.state.data}>
<Input name="text1" data={this.state.data.text1} onChange={this.handleChange} />
<Input name="text2" data={this.state.data.text2} onChange={this.handleChange} />
</Form>
</div>
);
}
}
const Form = props => (
<div className="Parent">
<div>Form component</div>
<div className="DataPreview">
Data preview in Form component
<div>{props.data.text1}</div>
<div>{props.data.text2}</div>
</div>
{props.children}
</div>
);
const Input = props => (
<div className="Child" id={props.id}>
<div>Input component {props.id}</div>
<input name={props.name} type="text" value={props.data} onChange={props.onChange} />
</div>
);
const rootElement = document.getElementById("root");
ReactDOM.render(<Page />, rootElement);
.Page {
border: 10px solid blue;
}
.Parent {
border: 10px solid turquoise;
}
.Child {
border: 3px solid tomato;
}
.DataPreview {
border: 3px solid lightgray;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

As other people have said, you are holding the same state in different components, which obviously isn't correct.
However, to answer your requirement regarding decoupling child components from the form, you could make your form handle state changes from the inputs by using a render prop which would pass a callback to the inputs, see code and link.
https://codesandbox.io/s/4zyvjm0q64
import React, { Component } from "react";
import ReactDOM from "react-dom";
import "./styles.css";
class Input extends Component {
constructor(props) {
super(props);
}
handleChange(id, value) {
this.props.onChange(id, value);
}
render() {
return (
<div className="Child" id={this.props.id}>
<div>Input component {this.props.id}</div>
<input
id={this.props.id}
type="text"
value={this.props.data}
onChange={e => this.handleChange(e)}
/>
</div>
);
}
}
class Form extends Component {
constructor(props) {
super(props);
this.state = this.props.data;
}
handleChange = (id, value) => {
this.setState({ [id]: value });
};
render() {
return (
<div className="Parent">
<div>Form component</div>
<div className="DataPreview">
Data preview in Form component
<div>{this.state.text1}</div>
<div>{this.state.text2}</div>
</div>
{this.props.render(this.handleChange)}
</div>
);
}
}
class Page extends Component {
constructor(props) {
super(props);
this.state = {
data: {
text1: "Initial text1",
text2: "Initial text2"
}
};
}
render() {
return (
<div className="Page">
<div className="DataPreview">
Data preview in Page component
<div>{this.state.data.text1}</div>
<div>{this.state.data.text2}</div>
</div>
<Form
data={this.state.data}
render={(handler) => {
return (
<div>
<Input id="text1" onChange={e => handler("text1", e.target.value)} />
<Input id="text2" onChange={e => handler("text2", e.target.value)} />
</div>
);
}}
/>
</div>
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<Page />, rootElement);

React 6 navigation and clicks not working as expected

Sorry to ask so many questions, but this only my second and 1/2 week working with React.
When I click on the following links, I can see the URL/URI change in the browser, but it does not seem to load the component(s). What am I missing?
import React from "react";
import { Link } from "react-router-dom";
import { BrowserRouter as Router, Route } from "react-router-dom";
import NewComponent from "./new.component";
import ListComponent from "./list.component";
class NavComponent extends React.Component {
constructor(props) {
super(props);
this.state = { data: [] };
}
render() {
return (
<div className="row">
<div className="col-sm-8 col-sm-offset-2">
<nav className="navbar navbar-default">
<div className="container-fluid">
<div className="navbar-header">
<a className="navbar-brand">Simple CRUD</a>
</div>
<div id="navbar" className="navbar-collapse">
<ul className="nav navbar-nav">
<li>
Coin Management
</li>
<li>
Add Coin
</li>
</ul>
</div>
</div>
</nav>
<Router>
<Route path={"ListComponent"} component={ListComponent} />
</Router>
<Router>
<Route path={"NewComponent"} component={NewComponent} />
</Router>
</div>
</div>
);
}
}
export default NavComponent;
I have tried to use Link to={"/"} and Link to={"/add"}, but the error will be - Link should be used within the Router. I know that I am missing something simple.
I have also tried creating some onClick={"window.location.href=/add"} but I received the error - Expected onClick listener to be a function, instead got a value of string type
The same error message when I use onClick='{window.location.href="/add"}' - it does look like it is trying to do it.
Do I have to build a router group, like I did in Laravel? if so, then can you point me to some examples?
The following is the NewComponent that I want the app to navigate to or load in place of the ListComponent:
import React from "react";
import Axios from "axios";
import toastr from "toastr";
import $ from "jquery";
import bootstrap from "bootstrap";
import ListComponent from "./list.component";
class NewComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
name: null,
price: null
};
}
submitForm(event) {
event.preventDefault();
var data = $(event.target).serialize();
toastr.clear();
var isError = false;
if (this.state.name === "") {
toastr.error("Coin name must be filled!");
isError = true;
}
if (this.state.price === 0 || this.state.price === "") {
toastr.error("Coin price must be filled!");
isError = true;
}
if (!isError) {
toastr.info("Inserting new coin data...");
Axios.post(
"http://local.kronus:8001/v2018/ng6crud/api/put-coins/" +
this.state.id +
"/" +
this.state.name +
"/" +
this.state.price,
{
id: this.state.id,
name: this.state.name,
price: this.state.price
}
)
.then(function(response) {
toastr.clear();
window.location.href = "#/";
})
.catch(function(error) {
toastr.clear();
toastr.error(error);
});
}
}
onCoinNameChange(e) {
this.setState({
id: this.state.id,
name: e.target.value.trim(),
price: this.state.price
});
}
onCoinPriceChange(e) {
this.setState({
id: this.state.id,
name: this.state.name,
price: e.target.value
});
}
render() {
return (
<div>
<form className="form-horizontal" onSubmit={this.submitForm.bind(this)}>
<div className="form-group">
<label className="control-label col-sm-2" htmlFor="coinEmail">
Name :{" "}
</label>
<div className="col-sm-10">
<input
type="text"
name="coinName"
onChange={this.onCoinNameChange.bind(this)}
id="coinName"
className="form-control"
placeholder="Coin Name"
/>
</div>
</div>
<div className="form-group">
<label className="control-label col-sm-2" htmlFor="coinPrice">
Price :{" "}
</label>
<div className="col-sm-10">
<input
type="number"
name="coinPrice"
onChange={this.onCoinPriceChange.bind(this)}
id="coinPrice"
className="form-control"
placeholder="Coin Price"
/>
</div>
</div>
<div className="form-group">
<div className="col-sm-offset-2 col-sm-10">
<button type="submit" className="btn btn-default">
Save
</button>
</div>
</div>
</form>
</div>
);
}
}
export default NewComponent;
BTW, zero errors and a few warnings about bootstrap as being defined but never used
Once again, thanks in advance

As #tholle said in the comments, you should only have a single Router component wrapping the entirety of your app. Normally this is done at the top most component so something like
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import registerServiceWorker from './registerServiceWorker';
import { BrowserRouter } from 'react-router-dom';
import App from './components/App';
import './index.css';
ReactDOM.render(
// here is where we are wrapping our app, <App /> in <BrowserRouter />
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById('root'));
registerServiceWorker();
This is normally how a Create-React-App app is set up so whatever you are using YMMV. Just remember to wrap your top level component, usually <App /> in the <BrowserRouter /> or in your code <Router /> component.
Now on to your <Route /> components, curly braces are only necessary when we need to pass JS into our components attributes. In your example, <Route path={"ListComponent"} component={ListComponent} /> the path attribute needs to be a URL, in relation to the home page, that will be responsible for rendering that component. So something more like <Route path='./list' component={ ListComponent } /> is just fine. If you needed to pass a variable into path then you would use the curly braces like so ...path={ var + '/list' }....
Lastly, to get your <NewComponent /> to load you need to import { Link } from react-router-dom and instead of using those anchor tags, use <Link to='/add'>Links to the NewComponent component</Link> and just make sure your Route component that renders the NewComponent's path attribute matches.
Helpful links
React Router 4 - Quickstart

Change anchor tags to Link
Change route path to url
https://reacttraining.com/react-router/web/example/basic
Follow react router example for better understanding

Make button disable using react failed

render(){
const { loading } = this.state;
return(
<div>
{!loading ? <input disabled type='text' /> : <input type='text' />}
</div>
)
}
Above jsx make sense? I didn't get any compliation error, just that I got a warning from react saying Unknown propdisabbedon <input> tag.
How to changed the attr of the button to disabled the correct way? Imagine if my input has lots of class of css, do I need to repeat them too? I felt it's redundant.

You don't need a conditional rendering on the input tag. You can do it the following way
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
loading: true
}
}
render(){
const { loading } = this.state;
return(
<div>
<input disabled={loading} type='text'/>
</div>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>