I am creating a MERN project in webstorm. I am trying to direct to another React component upon clicking a button in one React component. I did that using Routes. Redirection happens. But the content in my second React component is not showing up.
<Button block bsSize="large" disabled={!validateForm()} type="submit">
{/* eslint-disable-next-line no-undef */}
<Route path = "./" component = {AppointmentMakingComponent} />
</Button>
My second React component is
import React from 'react'
class Hello extends React.Component {
constructor(props){
//Since we are extending the default constructor,
//handle default activities first.
super(props);
//Extract the first-name from the prop
let firstName = "abc"
//In the constructor, feel free to modify the
//state property on the current context.
this.state = {
name: firstName
}
} //Look maa, no comma required in JSX based class defs!
render() {
return <h1>Hello, {this.state.name}!</h1>
}
}
export default Hello
Please help
Related
First React project here, so probably a very elementary question, but I'd appreciate any help as I'm not really sure how to phrase my question to search. I have this component:
import React, { Component } from 'react';
import SmallOgLogo from '../../../static/images/OG_logo.jpg';
export default class HeaderNavbar extends Component {
constructor(props) {
super(props);
this.state = {
showImage: true
}
}
render () {
return (
<div>
<div className='header-navbar'>
<div>
<img className='SmallOgLogo' src={SmallOgLogo}/>
</div>
)}
<h1>Title</h1>
</div>
</div>
);
}
}
This is a header for a project I'm working on. It is on every page in the React project. However, on the "title page" (first page users see with the option to "register" or "login"), I don't want it to display SmallOgLogo. On every other page, it will (hence the default setting of true. How can I make it so when I embed this component in another component, I can do something like ? Can anyone clarify? Thank you!
I'm learning React and I'm having issues opening a new component that I created. On my page I have a button to create a new record and when clicked the URL changes but the component doesn't render.
Note: I am able to open existing components within the app, just not newly created new ones.
The code looks like:
<div>
<NavLink className="btn blue" to="./CreateNewUser">Add New User</NavLink>
</div>
the component:
CreateNewUser.js
import React, { Component } from 'react';
export class CreateNewUser extends Component {
render() {
return <h2>Add New User</h2>;
}
}
You are very likely missing the route to your new component in react-router.
You can check the sample code in this link for reference, specifically the <Switch> tag and the <Route> tags within it
State is the smart component which store all the states of child components
import React from 'react';
import TextArea from './Components/TextArea';
class State extends React.Component {
constructor(props) {
super(props);
this.state = {
name: ''
}
this.myChangeHandler = this.myChangeHandler.bind(this)
}
myChangeHandler = (event) => {
event.preventDefault();
this.setState({
[event.target.name]:event.target.value
});
}
render() {
return (
<div>
{/* Change code below this line */}
<TextArea name = {this.state.name}
myChangeHandler = {this.myChangeHandler}/>
{/* Change code above this line */}
</div>
);
}
};
export default State;
Now TextArea is the child component which share the input value to state.
import React from 'react';
import '../style.css';
class TextArea extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<input type="text" onChange= {this.props.myChangeHandler} name="name" value={this.props.name}></input>
<h1>Hello, my name is:{this.props.name} </h1>
</div>
);
}
};
export default TextArea;
There are several child components that send the data to state component.
so the app component is used to order the child component.
I need two parents for a child component. please see the image enter image description here
import React from 'react';
import { BrowserRouter, Route } from 'react-router-dom'
import './App.css';
import TextArea from './Components/TextArea'
function App() {
return (
<div className="App">
<BrowserRouter>
<Route path = "/new" component= {TextArea} />
</BrowserRouter>
</div>
);
}
export default App;
You can't have two "direct" parent for a single component but you can have multiple indirect parents.
Example:
App is the parent of State
State is the parent of TextArea
App is also a parent of TextArea but not a direct one.
This means that you can pass props (data and functions) from the top parent to all of his children.
If you need to pass a function from App to TextArea you need to pass it by State.
Here a tutorial on how to do it.
You can also use the Context and here's a tutorial on how to do it.
Am new to reactjs and now working on routing and navigation. On pressing button am trying to navigate to new page, but it throws error.
my App.js file:
import React from 'react';
import './App.css';
import Editor from './editor';
import {BrowserRouter as Router, Route, Link} from "react-router-dom";
import {createBrowserHistory} from "history";
const history = createBrowserHistory();
class App extends React.Component {
constructor(props) {
super(props);
this.state ={
};
this.onProductClick = this.onProductClick.bind(this);
}
onProductClick(){
console.log('clicked');
this.history.push('/editor');
}
render() {
return (
<Router>
<div>
<Route path='/editor' component={Editor} history={history} />
</div>
<div>
<button onClick={this.onProductClick} className="btn btn-primary" id="a_1">Try now!</button>
</div>
</Router>
)
}
}
export default App;
And my editor.js file is this:
import React, { Component } from 'react';
class Editor extends React.Component {
constructor(props) {
super(props);
this.state = {
}
}
render() {
return (
<div id="editor">
<h3>Products Here</h3>
</div>
);
}
}
export default Editor;
after clicking the button the error message is:
TypeError: Cannot read property 'push' of undefined
15 | }
16 | onProductClick(){
17 | console.log('clicked');
> 18 | this.history.push('/editor');
19 | ^
20 | }
21 |
22 | render() {
I don't Understand what am doing wrong here.
It looks like your referencing this.history.push('/editor'); inside of onProductClick, because you are using this, the JS engine is trying to find the variable history in the context of the class but since there's no variable called history defined within the class's context it's evaluating to undefined.push leading to the error cannot read property push of undefined.
You did define a history variable outside of the class definition. To access it, you can change this.history.push('/editor'); to history.push('/editor'); with this change, you will be referencing the history variable you defined on the top.
Most likely however with React router, you should try to access the history object from props, so this.props.history.push('/editor')
The history object is available in the props. Use this.props.history.push instead. Also, there are a couple of things wrong about your code. Try isolating the routes and components. The button must be outside the router component. Use React.Fragment to render more than two components at once. Study up some more about react.
I made a component called NewName where it has a button with text "New". I want the page to go to the second component that I made called "ProfileInformation".
This is the "NewName.js" component that has the new button in it
import React, { Component } from "react";
class NewName extends Component {
render() {
return (
<div>
<button>New</button>
</div>
)
}
}
export default NewName
This is the component that I want to go to when the new button is clicked. It has other components. It is the "ProfileInformation.js" component.
import React from 'react'
import UserDetail from "./UserDetail"
import ProfilePicture from "./ProfilePicture"
import UserName from "./UserName"
class ProfileInformation extends React.Component{
render(){
return(
<div>
<ProfilePicture />
<UserName />
<UserDetail />
</div>
)
}
}
export default ProfileInformation
I want the ProfileInformation component to render in the screen after the user hits the new button.
You need to use react-router to navigate between pages. here is official page: https://reacttraining.com/react-router/core/guides/quick-start