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
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 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
So I'm brand new to React and having troubles with the routing. I want to open a component as a new page when a button/link is clicked rather than the component loading under the component containing the button/link.
Component with link segment (experience.js):
<div className="experience-desc-wrapper">
<p> filler text </p>
<Router>
<Link to="/classlist">Click this link to see relevant coursework</Link>
<Route exact path="/classlist" component={ClassList}/>
</Router>
</p>
</div>
Component I want to open in a new page (classlist.js):
import React from 'react';
import './styles.css';
class ClassList extends React.Component {
render() {
return ( <
div >
hello!
<
br / >
test 1 <
br / >
test 2 <
/div>
)
}
}
export default ClassList;
What's happening to me is that "hello, test 1, test 2" from classlist.js is being displayed under "filler text" in experience.js. How do I get classlist.js to open as a new page? (For reference I do have classlist imported as well as Router, Route, and Link).
In that case,you need to place ClassList and Experience component on same level
<Route exact path="/experience" component={Experience}/>
<Route exact path="/classlist" component={ClassList}/>
Now you dont get Experience component content while loading ClassList component
I have a site that is not a spa. At one point when a button is click a div is created in the dom. After the div is created I want to render a React component into this div. My component looks like this
import React, { Component } from 'react';
class MyComponent extends Component {
constructor(props) {
super(props);
this.state = {
date: null
};
}
render() {
return (
<div>
//Here will be more controls
</div>
);
}
}
I'm running webpack on this file and in my original page I'm referencing the generated js file.
What code should I add to my button click code that is adding the div so I can render the component?
ps. Actually the functionality is a bit more complex, because we are scraping a page the user specifies and showing the html in an iframe through the srcdoc attribute. The scraped html has the div added and then we render a widget in the div so the user can preview what our widget would look like on their page.
You have to use ReactDOM to render the component. Install and import react-dom in your project so that webpack bundles it for you. You might need to expose ReactDOM as global in your web pack configuration.
Below is a simple code snippet:
ReactDOM.render(
<MyComponent/> ,
document.getElementById(id) // id of element in your case div created
);
Reference
https://reactjs.org/docs/react-dom.html
In my react application, when I click on an external link suppose http://www.example.com/about, I do not want it to redirect to that website but I want that about page to render as a popup in my react application. How can I approach this?
You might make a wrapper component for the links that would check if the href prop matches your website location or goes to a 3rd party site, and renders either a normal a tag or a modal dialog with an iframe inside.
Eg. Link.js
import React, { Component, Fragment } from 'react'
import Modal from '...' // any of the available modal component for react
export default class Link extends Component {
state = { isOpen: false }
render () {
const url = new URL(this.props.href)
if (url.hostname === WEBSITE_HOSTNAME) return (
<a href={this.props.href}>{this.props.children}</a>
)
return (
<Fragment>
// you could also use an <a> here if you want users to be able to open the link in a new tab with a right click
<button onClick={() => this.setState({ modalOpen: true })}>{this.props.children}</button>
<Modal isOpen={this.state.isOpen}>
<iframe src={this.props.href} />
</Modal>
</Fragment>
)
}
}
Even better, split it into two components as there's no need for regular links to have any state...