Once I am going to refresh pages rather than main route, browser showing script/code instead of ui. Web app made using reactjs v16. I am looking for solutions. Could you please help me?
page after refresh
import React, { Component } from 'react';
class DashboardContainer extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div className="right_col quick-settings" role="main">
Dashboard
</div>
)
}
}
export default DashboardContainer;
I think you omitted the angle bracket(<>) by mistake when you used Dashborard component. Try this:
import React, { Component } from 'react';
class DashboardContainer extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div className="right_col quick-settings" role="main">
<Dashboard />
</div>
)
}
}
export default DashboardContainer;
Related
I'm new to react and my question is extremely simple. I want to just know the best way to output a navigation menu on a page (i.e. literally just page links).
So my main app.js has this code:
import React, {Component} from "react";
import NavMenu from "./nav-menu";
const theLinks = [
"home",
"subs"
]
export default class App extends Component {
constructor() {
super();
this.state = {
navLinks: theLinks
}
}
render() {
return (
<div id="container">
<NavMenu navLinks={this.state.navLinks} />
</div>
);
}
}
And the nav-menu component has this code:
import React, {Component} from "react";
export default class navBar extends React.Component {
render() {
return (
this.props.navLinks.map((c, i) => <a href={c[1]} key = {i} > {c[0]} </a>)
)
}
}
Which should (but doesn't) output is like this:
<div id="container"> home subs </div>
Why is this not outputting like the above? My gut feeling also senses that this is not a good way to output a menu or list of links. What is a better way?
Thanks for any advice here. I'm trying to learn react pragmatically and without having to study a long course.
Stackblitz: https://stackblitz.com/edit/react-hunbng?file=src%2FApp.js
Your array has quite a strange structure. I'd go for something more readable/usable:
App.js
import React, {Component} from "react";
import NavMenu from "./nav-menu";
const theLinks = [
{
name: "home",
href: "/index"
},
{
name: "subs",
href: "/subs"
},
]
export default class App extends Component {
constructor() {
super();
this.state = {
navLinks: theLinks
}
}
render() {
return (
<div id="container">
<NavMenu navLinks={this.state.navLinks} />
</div>
);
}
}
nav-menu.js
import React, {Component} from "react";
export default class navBar extends React.Component {
render() {
return (
// it's considered bad practice to use the map-index as a key, hence the href as key
this.props.navLinks.map((c) => <a href={c.href} key={c.href} > {c.name} </a>)
)
}
}
I'm kinda new to react and thought that in the constructor function, using super(props) can fully receive the props that passed by parents. But however, I can't get the string test from my parent component.
So in the parent component, I pass the string "test" as props
import React from 'react';
import Post from '../components/post';
import "../components/css/post.css"
class Bulletin extends React.Component {
render()
{
console.log(this.props);
return (
<div>
<Post test={"sent from parent"}/>
</div>
);
}
}
export default Bulletin;
And then in Post.js, I print the props in two places:
import React, { Component } from 'react';
export default class Edit extends Component {
constructor(props) {
super(props);
console.log(props);
}
render() {
console.log(this.props);
return (
<div className="editor" onClick={this.focus}>
</div>
);
}
}
The two outputs are both {className: "editor"} which is not what I need. I need the string {test: "sent from parent"} and don't know why this doesn't works for me.
I tried this approach:
import React, { Component } from 'react'
export default class AlertHey extends Component {
constructor(props) {
super(props)
this.handleClick = this.handleClick.bind(this)
}
handleClick(){
alert("hey")
}
render(){
return(
<div onClick={this.handleClick}>
Click me
</div>
)
}
}
And this approach:
import React, { Component } from 'react'
export default class AlertHey extends Component {
render(){
return(
<div onClick={() => alert("Hey")}>
Click me
</div>
)
}
}
And both don't work. In develpment mode (npm run dev) all works well, while when I export, all listeners seems broken. I don't get it. Maybe I lost any babel or webpack setting?
Does this work in production? I noticed you don't have a return () tags in your render method. You also have to bind this.handleClick to your instance rather than handleClick1.
Issue
I have a problem with conditional rendering of a component. As far as I can see, there are 2 approaches to doing this. First approach is ugly as it becomes difficult when I have to do multiple && conditions. The second way is clear, but it adds the component itself to the state and further computations with the state value is difficult. E.g checking what is the message value for error.
I have given both the approaches below. Please let me know which would be better. Is there a another approach than both of them?
Application
This is a simple application that renders either 'Main' component or 'Err' component, based on the state of 'err' attribute in first approach and content of the comp attribute in second approach.
Initially Main component is rendered. The err attribute is updated to some value after 2 seconds, which triggers rerendering. At this time, I want Err component to render.
The real application is I have an external api call on componentDidMount and it can either fail or succeed. I have to display different components based on result. It is a little more complicated with multiple state values being updated. I have simplified the issue below for the purpose of demonstration.
Common steps for both types
npx create-react-app react-oop
component/Err.js
import React,{Component} from 'react'
class Err extends Component {
render(){
return(
<div>
Error Component
</div>
)
}
}
export default Err
component/Main.js
import React, {Component} from 'react'
class Main extends Component {
render(){
return(
<div>
Main Component
</div>
)
}
}
export default Main
First approach
App.js
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Err from './components/Err'
import Main from './components/Main'
class App extends Component {
constructor(props){
super(props)
this.state = {
err: null
}
this.setError = this.setError.bind(this)
}
setError(){
return(
this.setState(() => {
return({
err: 'Error'
})
})
)
}
componentDidMount(){
setTimeout(this.setError, 2000)
}
render() {
return (
<div className="App">
{
this.state.err ? <Err /> : <Main />
}
</div>
);
}
}
export default App;
Second approach
App.js
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Err from './components/Err'
import Main from './components/Main'
class App extends Component {
constructor(props){
super(props)
this.state = {
comp: <Main />
}
this.setError = this.setError.bind(this)
}
setError(){
return(
this.setState(() => {
return({
comp: <Err />
})
})
)
}
componentDidMount(){
setTimeout(this.setError, 2000)
}
render() {
return (
<div className="App">
{this.state.comp}
</div>
);
}
}
export default App;
I definitely recommend the 1st approach. Store data (json), not views (jsx) in your component's state.
Actually there is a 3rd approach that takes the best of both:
use a jsx variable to edit the view (with your logic) before rendering
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Err from './components/Err';
import Main from './components/Main';
class App extends Component {
constructor(props){
super(props);
this.state = {
err: null
};
}
// This way of writing functions saves you the binding
setError = () => this.setState({err: 'Error'})
componentDidMount(){
setTimeout(this.setError, 2000);
}
render() {
let comp = <Main />;
// Put your logic here so your returned JSX is clear
if (this.state.err)
comp = <Err />;
return (
<div className="App">
{comp}
</div>
);
}
}
export default App;
Both approaches are essentially the same but I prefer option 1 as it's simpler to grasp. You can also use something like babel-plugin-jsx-control-statements#choose which makes the React component look simpler:
<Choose>
<When condition={ test1 }>
<Main />
</When>
<When condition={ test2 }>
<AnotherMain />
</When>
<Otherwise>
<Err />
</Otherwise>
</Choose>
I have a strange problem. When I try to render a component ("parent"), it works fine. but, when I add a child component, I cant see both components on screen (parent&child). My code looks like :
Does not Work:
import React from 'react';
import SonComp from './SonComp';
export default class ParentBox extends React.Component {
render() {
return(
<div>
<div>
<SonComp />
</div>
</div>
);
}
}
Does Work:
import React from 'react';
export default class ParentBox extends React.Component {
render() {
return(
<div>
<div>
<p>Hello<p>
</div>
</div>
);
}
}
The child :
import React from 'react';
export default class SonComp extends React.component {
render() {
return (
<div>
<p>hi</p>
</div>
);
}
}
Change the React.component in your does not work code to React.Component.