We Keep Coding

How to send input from one React component to other?

I want to create a login page. When the user submits the form, the username should be rendered on the dashboard. I am unable to figure that out.
import React from "react";
import Footer from "./Footer";
import Back from "./Back";
import { Link } from "react-router-dom";
const Login = () => {
return (
<div>
<Back />
<div>
<form className="login-form">
<h1 className="form-heading">Login</h1>
<input
className="form-input"
type="text"
placeholder="Enter your Username"
/>
<input
className="form-input"
type="password"
placeholder="Enter your password"
/>
<button className="form-button">
<Link to={"/dashboard"}>Login</Link>
</button>
</form>
</div>
<Footer />
</div>
);
};
export default Login;

To share data between two components, the standard react approach is to lift the state up to a parent component, then pass it down (through props or context). For example:
const App = () => {
const [user, setUser] = useState();
return (
<Routes>
<Route path="/login" element={<Login setUser={setUser}/>}
<Route path="/dashboard" element={<Dashboard user={user}/>}
</Routes>
)
}
const Login = ({ setUser }) => {
return (
// ...
<Link to="/dashboard" onClick={() => setUser('bob')}
// ...
);
}
const Dashboard = ({ user }) => {
return (
<div>
Hello {user}!
</div>
)
}

Moving input values from one component on page to another component on another page in react

I am quite new to React and working on a project where I want to move the input values from a form from one page to be displayed on another after submiting the inputs.
I have the below Measurement component with the input fields:
import React, { useState } from "react";
import "./measurements.scss";
import images from "../constants/images";
import { GrCircleInformation } from "react-icons/gr";
import Tooltip from "./Tooltip";
import MeasurementData from "./MeasurementData";
const Measurements = () => {
const [toggleTooltip, setToggleTooltip] = useState(false);
const [weight, setWeight] = useState();
const [height, setHeight] = useState();
const [shoulder, setShoulder] = useState();
const [chest, setChest] = useState();
const [abdominals, setAbdominals] = useState();
const [hips, setHips] = useState();
const [thigh, setThigh] = useState();
const [calf, setCalf] = useState();
const handleSubmit = (e) => {
e.preventDefault();
};
return (
<div className="app__measurements">
<GrCircleInformation
fontSize={16}
onMouseEnter={() => setToggleTooltip(true)}
onMouseLeave={() => setToggleTooltip(false)}
/>
{toggleTooltip && (
<Tooltip text="All measurements should be carried out while muscles are relaxes and be done in the exact same areas of the body every time. The time of day when the measurements are carried out should also be consistent" />
)}
<h2 className="app__measurements-heading">MEASUREMENTS</h2>
<div className="app__measurements-data">
<form className="app__measurements-form" onSubmit={handleSubmit}>
<label htmlFor="weight">Weight (kg)</label>
<br />
<input
type="number"
id="weight"
value={weight}
onChange={(e) => setWeight(e.target.value)}
name="weight"
/>
<br />
<label htmlFor="height">Height (cm)</label>
<br />
<input
type="number"
id="height"
value={height}
onChange={(e) => setHeight(e.target.value)}
/>
<br />
<label htmlFor="shoulder">Shoulders</label>
<br />
<input
type="number"
id="shoulder"
value={shoulder}
onChange={(e) => setShoulder(e.target.value)}
/>
<br />
<label htmlFor="chest">Chest</label>
<br />
<input
type="number"
id="chest"
value={chest}
onChange={(e) => setChest(e.target.value)}
/>
<br />
<label htmlFor="abdominal">Abdominals</label>
<br />
<input
type="number"
id="abdominal"
value={abdominals}
onChange={(e) => setAbdominals(e.target.value)}
/>
<br />
<label htmlFor="hips">Hips</label>
<br />
<input
type="number"
id="hips"
value={hips}
onChange={(e) => setHips(e.target.value)}
/>
<br />
<label htmlFor="thigh">Thighs</label>
<br />
<input
type="number"
id="thigh"
value={thigh}
onChange={(e) => setThigh(e.target.value)}
/>
<br />
<label htmlFor="calf">Calves</label>
<br />
<input
type="number"
id="calf"
value={calf}
onChange={(e) => setCalf(e.target.value)}
/>
<button type="submit" className="app__measurements-btn">
SAVE RESULTS
</button>
</form>
</div>
<img src={images.success} alt="" />
</div>
);
};
export default Measurements;
I then have the next page where I want the inputs to appear after submitting:
import React from "react";
import FitnessHeader from "../components/FitnessHeader";
import "./userPage.scss";
const UserPage = () => {
return (
<>
<FitnessHeader />
<div className="app__user">
<div className="app__user-container">
<h1 className="app__user-heading">YOUR PROGRESS</h1>
<div className="app__user-content">
<div className="app__user-measurements-container">
<div className="app__user-section app__user-measurements">
<h2 className="app__user-subheading">LAST MEASUREMENTS</h2>
</div>
<div className="app__user-section app__user-bmr">
<h2 className="app__user-subheading">BMR RATINGS</h2>
</div>
<div className="app__user-section app__user-bmi">
<h2 className="app__user-subheading">BMI RATINGS</h2>
</div>
</div>
<div className="app__user-results">
<h2 className="app__user-subheading">PREVIOUS WORKOUT RESULTS</h2>
</div>
</div>
</div>
</div>
</>
);
};
export default UserPage;
These two pages are connected in the App file:
import React, { useState } from "react";
import "./App.scss";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Home from "./pages/Home";
import Fitness from "./pages/Fitness";
import UserPage from "./pages/UserPage";
function App() {
return (
<>
<Router>
<Routes>
<Route exact path="/" element={<Home />} />
<Route exact path="/fitness" element={<Fitness />} />
<Route exact path="/user" element={<UserPage />} />
</Routes>
</Router>
</>
);
}
export default App;
Unfortunately I don't really how to make these inputs appear on the UserPage.

Since you are not using any kind of state management or context,
you are supposed to lift up the state by bringing the children component closer to the nearest parent component in this case App.js.
Define all the states in the App.js component then pass the state value as props in the respective components like below
import {useState} from react
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Fitness from '...'
import UserPage from '....'
function app(){
const [weight, setWeight] = useState();
const [height, setHeight] = useState();
function submitData () =>{}
return (
<BrowserRouter >
<Routes>
<Route path='/' elements={<>home</>}
<Route path='/form' elements={<Fitness
setWeight={setWeight}
submitData={submitData}
/>}
<Route pat='/user' elements={<UserPage
weight={weight}
submitData={submitData}
/>}
</Routes>
</BrowserRouter >
)
}
in your components
export default function Fitness({ setWeight,submitData }){ use setWeight as required }
export default function UserPage({ weight }){ use weight as required }
you can read more about lifting up the state here
Props drilling here
I hope that helps.

I want to pass an image as a prop to another page

The main problem is that this image is selected from the file explorer and I am using react-router.
Add.js
this is where you select the image
import { Link } from "react-router-dom";
import About from "./About";
import './styles/modal.css'
import firebase from "firebase";
require("firebase/firestore")
require("firebase/storage")
export default function Add(props) {
const [image, setImage] = useState(null);
const [modal, setModal] = useState(false);
const pickImage = (event) => {
//console.log();
setImage(URL.createObjectURL(event.target.files[0]));
//console.log(image);
}
const toggle = () => {
setModal(!modal);
}
return (
<div>
<h1>Add</h1>
<button onClick={toggle}>Add image</button>
{modal ? (
<div className="modal-bg">
<div className="modal">
<img src={image} style={{ width: '60%', height: '60%' }} className="ex-img" />
<br /><br />
<label htmlFor="fie" className="gcoo btn-default">+ File
<input id="fie" type="file" onChange={pickImage} className="file-pick" />
</label>
<br />
<br />
<div className="bottom-buttons">
<Link to="/about">
<button className="save">Save</button>
</Link>
<button onClick={() => setModal(false)} className="closse">Close</button>
</div>
</div>
</div>
) : null}
</div>
)
}
I am using firebase but not in this file so you can ignore this.
MainRoutes.js
this is where all the routes and pages are.
import { Route } from "react-router";
import { Switch } from 'react-router-dom';
import ImageDisplay from "./components/ImageDisplay";
import Add from './components/Add';
export default function MainRoute(props) {
return (
<Switch>
<Route exact path="/about" component={() => <ImageDisplay />} />
<Route exact path="/add" component={() => <Add />} />
</Switch>
);
}
finally this file ImageDisplay.js is where the image should be displayed
I dont have much on this file because i dont know how to put in any images.
I have tried props but whenever i imported the Imagedisplay it always showed the content on it and i dont want anything from image display. I only want to send an image over there.
import React from 'react'
import { Link } from "react-router-dom"
function ImageDisplay(props) {
return (
<div>
<h1>image</h1>
<div>
<img />
<p></p>
</div>
</div>
)
}
export default ImageDisplay;

Make sure that you are not reloading the page when moving between the two routes, since this will remove all state.
To share state between the two components you would need to store the state in the parent, and pass it to the children.
Add:
export default function Add(props) {
const pickImage = (event) => {
props.setImage(URL.createObjectURL(event.target.files[0]));
}
// The rest of your function
}
And in your parent:
export default function MainRoute(props) {
const [image, setImage] = useState(null)
return (
<Switch>
<Route exact path="/about" component={() => <ImageDisplay image={image} />} />
<Route exact path="/add" component={() => <Add setImage={setImage} />} />
</Switch>
);
}
You can now access the image prop in your imageDisplay.
function ImageDisplay(props) {
return (
<div>
<h1>image</h1>
<div>
<img src={props.image} />
<p></p>
</div>
</div>
)
}

How to use Link in React?

I am currently working on the react project which is a login-signup app using reactstrap. But I'm facing a problem when I use Link in the signup component in order to link the login component. Please help me to solve this problem.
component/signup.js:
import React, { Component } from 'react'
import {Link} from 'react-router-dom'
import '../App.css';
import {Button , Form, FormGroup, Label, Input} from 'reactstrap'
export class signup extends Component {
render() {
return (
<Form className="login-form App">
<h4 className="font-weight-bold text-center"> Sign Up Form</h4>
<FormGroup>
<Label>Full Name</Label>
<Input type="text" placeholder="Full Name"></Input>
</FormGroup>
<FormGroup>
<Label>Email</Label>
<Input type="email" placeholder="Email Address"></Input>
</FormGroup>
<FormGroup>
<Label>Password</Label>
<Input type="password" placeholder="Password"></Input>
</FormGroup>
<Button type="submit" className="btn-primary btn-lg btn-block">Sign Up</Button>
<p>Already Signup, <Link to ="/Login">Login</Link></p>
</Form>
)
}
}
export default signup
component/login.js:
import React, { Component } from 'react'
import '../App.css';
import {Button , Form, FormGroup, Label, Input} from 'reactstrap'
export class Login extends Component {
render() {
return (
<Form className="login-form App">
<h4 className="font-weight-bold text-center"> Login Form</h4>
<FormGroup>
<Label>Email</Label>
<Input type="email" placeholder="Email Address"></Input>
</FormGroup>
<FormGroup>
<Label>Password</Label>
<Input type="password" placeholder="Password"></Input>
</FormGroup>
<Button type="submit" className="btn-primary btn-lg btn-block">Login</Button>
</Form>
)
}
}
export default Login
App.js:
import React, { Component } from 'react'
import Signup from './component/signup'
import './App.css';
class App extends Component {
render() {
return (
<Signup />
)
}
}
export default App

You need to define the Login route in your App.js:
import React, { Component } from 'react'
import Signup from './component/signup'
import Login from './component/login' //Login should also be imported
import './App.css'
import { BrowserRouter as Router, Route } from "react-router-dom"//Router
class App extends Component {
render() {
return (
<Router> {/* Creating applications routes */}
<Route exact path="/" component={Signup} /> {/*Signup Route*/}
<Route exact path="/Login" component={Login} /> {/*Login Route*/}
</Router>
)
}
}
export default App
Notice I defined your signup on the root of your application (/). You can point it to wherever you want and you may need to define other routes in your App.js

Your code is missing some important part:
Link component are always wrapped up with Router component
In order to Link the component you have a Switch component containing the Route component.
Below is a sample code to use Link, Route, Router & Switch. Hope this will help
import React, { Component } from "react";
import ReactDOM from "react-dom";
import { Route, Link, BrowserRouter as Router, Switch } from "react-router-dom";
import "./styles.css";
const User = ({ match }) => {
console.log(match);
return <h1>User: {match.params.id}</h1>;
};
class Users extends Component {
render() {
return (
<div>
<h1>Users</h1>
<h2>Select a user</h2>
<li>
<Link to="/user/1">user 1</Link>
</li>
<li>
<Link to="/user/2">user 2</Link>
</li>
<li>
<Link to="/user/3">user 3</Link>
</li>
<Route path="/user/:id" component={User} />
</div>
);
}
}
class Contact extends Component {
render() {
return (
<div>
<h1>Contact</h1>
</div>
);
}
}
function App() {
return (
<div>
<h1>Home</h1>
</div>
);
}
function NotFound() {
return <h1>Not Found</h1>;
}
const routing = (
<Router>
<div>
<ul>
<li>
<Link to="/">home</Link>
</li>
<li>
<Link to="/users">users</Link>
</li>
<li>
<Link to="contact">contact</Link>
</li>
</ul>
<Switch>
<Route exact path="/" component={App} />
<Route path="/users" component={Users} />
<Route path="/contact" component={Contact} />
<Route component={NotFound} />
</Switch>
</div>
</Router>
);
const rootElement = document.getElementById("root");
ReactDOM.render(routing, rootElement);
CodeSandbox demo: working code demo

When you want to use the Link component to define which links in your component. You must use at the highest level of your Component tree the BrowserRouter component from react-router-dom
import { BrowserRouter as Router, Route, Switch, Redirect } from 'react-router-dom';
import { React } from 'react';
import { Signup } from './component/signup';
import { Login } from './component/Login';
export default function App(props) {
return (
<div>
// Any code goes here
<Router>
<Switch>
<Route exact={true} path="/login" component={Login}/>
<Route exact={true} path="/signup" component={Login}/>
<Redirect path="/login" />
</Switch>
</Router>
// Any code goes here
</div>
)
}
After you have use Router to define which component is rendered on given path in the Highest component in the component tree you can use Link in any Child component

cannot read property of map undefined using React redux

I'm trying to add information to a component but as soon as I click on the form button I get cannot read property map of undefined. Please help.
I've checked all the Db and routes, reducers etc. and they're all fine.
Here is component containing the form (The console.log returns "undefined")
import React from "react";
import { connect } from "react-redux";
import { addExercise } from "../actions/exercises";
class CreateExercise extends React.Component {
constructor(props) {
super(props);
this.state = {
newExercise: {},
};
}
handleSubmit(e) {
e.preventDefault();
e.target.reset();
this.props.dispatch(addExercise(this.state.newExercise));
}
updateDetails(e) {
let newExercise = this.state.newExercise;
newExercise[e.target.name] = e.target.value;
this.setState({ newExercise });
}
render() {
console.log("anything", this.props);
return (
<div className="form-container">
<form onSubmit={this.handleSubmit.bind(this)}>
<h2>Exercise Form</h2>
<div className="form">
<div>
<label>Name of Exercise:</label>
<input
name="exe_name"
type="text"
onChange={this.updateDetails.bind(this)}
/>
</div>
<div>
<label>Exercise Info:</label>
<input
name="exe_info"
type="text"
onChange={this.updateDetails.bind(this)}
/>
</div>
<div>
<label>Exercise Url:</label>
<input
name="exe_url"
type="text"
onChange={this.updateDetails.bind(this)}
/>
</div>
<div>
<label>Exercise Url2:</label>
<input
name="exe_url2"
type="text"
onChange={this.updateDetails.bind(this)}
/>
</div>
<div>
<label>Comment:</label>
<input
name="comment"
type="text"
onChange={this.updateDetails.bind(this)}
/>
</div>
</div>
<select name="plan_id" onChange={this.updateDetails.bind(this)}>
<option>Enter plan details</option>
{this.props.plans.map((plan, i) => {
return <option value={plan.plan_id}>{plan.sets}</option>;
})}
</select>
<input className="submit" type="submit" value="Submit" />
</form>;
</div>
);
}
}
const mapStateToProps = ({ plans }) => {
return { plans };
};
export default connect(mapStateToProps)(CreateExercise);
And here is the App component where it's being called.
import React from "react";
import { HashRouter as Router, Route } from "react-router-dom";
import { connect } from "react-redux";
import { getExercises } from "../actions/exercises";
import { getPlansRequest } from "../actions/plansActions";
import ExerciseList from "./ExerciseList";
import Header from "./Header";
import CreateExercise from "./CreateExercise";
import Single from "./Single";
import About from "./About";
import Home from "./Home";
import CreatePlan from "./CreatePlan";
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
showExerciseForm: false,
showPlanForm: false,
};
}
componentDidMount() {
this.props.dispatch(getPlansRequest());
this.props.dispatch(getExercises());
}
toggleForm(e) {
this.setState({ [e.target.name]: !this.state[e.target.name] });
}
render() {
return (
<Router>
<div className="app-container">
<div className="sidebar pure-u-1 pure-u-md-1-4">
<Header />
</div>
<Route
exact
path="/"
component={() => (
<button
name="showExerciseForm"
onClick={this.toggleForm.bind(this)}
>
{this.state.showExerciseForm ? "Cancel" : "Create Exercise"}
</button>
)}
/>
{this.state.showExerciseForm && (
<Route exact path="/" component={CreateExercise} />
)}
<Route
exact
path="/"
component={() => (
<button name="showPlanForm" onClick={this.toggleForm.bind(this)}>
{this.state.showPlanForm ? "Cancel" : "Create Plan"}
</button>
)}
/>
{this.state.showPlanForm && (
<Route exact path="/" component={CreatePlan} />
)}
<Route exact path="/exercises" component={ExerciseList} />
<Route
exact
path="/exercises/:id"
component={props => <Single {...props} />}
/>
<Route path="/about" component={About} />
<Route path="/" component={Home} />
</div>
</Router>
);
}
}
export default connect()(App);

You must send some props in the route to fetch them in component
In App component
{this.state.showExerciseForm && (<Route exact path="/" foobar="Something" component={CreateExercise} />)}
In CreateExercise fetch props by
this.props.foobar