React component won't render - reactjs

I am doing freecodecamp and I am geting following error:
Uncaught TypeError: Super expression must either be null or a function
I can't figure out where my mistake is. Here is code:
class MyComponent extends React.component{
constructor(props){
super(props);
};
render(){
return(
<div>
<h1>My First React Component!</h1>
</div>
);
};
};
ReactDOM.render(<MyComponent />,document.getElementById('challenge-node'));

it should be React.Component and not React.component
class MyComponent extends React.Component{
constructor(props){
super(props);
};
render(){
return(
<div>
<h1>My First React Component!</h1>
</div>
);
};
};
ReactDOM.render(<MyComponent />,document.getElementById('challenge-node'));

I believe it is because of a simple typo in your code.
You have inputted React.component where is should be React.Component. I rectified that and the code works now.
class App extends React.Component {
render() {
return (
<div>
<h1>My First React Component!</h1>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("challenge-node"));

Related

React Context consumer can't find props

I'm trying to use React Context API to pass props, however I got "undefined" error. The version of react is 16.3.2, and react-dom version is 16.3.2. The following is my code:
Provider.jsx:
import React from 'react';
export const PathContext = React.createContext({
rootPath: "http://localhost/example"
});
App.jsx:
import React from 'react';
import {PathContext} from './Provider.jsx';
class App extends React.Component {
constructor(props) {
super(props);
}
render() {
return(
<div>
<PathContext.Provider>
<AppRootPath />
</PathContext.Provider>
</div>
)
}
}
class AppRootPath extends React.Component {
render() {
return(
<div>
<span>App Root Path</span><br />
<PathContext.Consumer>
{
({rootPath}) => <span>{rootPath}</span>
}
</PathContext.Consumer>
</div>
)
}
}
export default App;
I can't find any problems in here, but the console reports this error: TypeError: Cannot read property 'rootPath' of undefined, and the error happens in here: ({rootPath}) => <span>{rootPath}</span>
About using a default value:
If there is no Provider for this context above, the value argument
will be equal to the defaultValue that was passed to createContext().
But you are wrapping it with Provider. Try removing Provider:
class App extends React.Component {
constructor(props) {
super(props);
}
render() {
return(
<div>
<AppRootPath />
</div>
)
}
}
class AppRootPath extends React.Component {
render() {
return(
<div>
<span>App Root Path</span><br />
<PathContext.Consumer>
{
({rootPath}) => <span>{rootPath}</span>
}
</PathContext.Consumer>
</div>
)
}
}

Triggering a parent function from child using props

I am trying to do something simple: I want my child component to trigger a function found in my parent component, and I understand the right way is using props.
In the following Codepen you can find an example:
https://codepen.io/akmur/pen/MvXGEG
Basically what I want to achieve is to print "hey" to console.
This is my code:
class Form extends React.Component {
constructor(props){
super(props);
}
onClickAdd(){
this.props.addItem();
}
render(){
return(
<div>
<button onClick={this.onClickAdd}>Add</button>
</div>
)
}
}
class App extends React.Component {
constructor(props){
super(props);
}
addItem(){
console.log('hey');
}
render() {
return (
<div>
<Form addItem={this.addItem} />
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('app'));
Thanks for your help!
You don't need the onClickAdd function. Just call this.props.addItem directly onClick (notice, no parens) that you passed down.
class Form extends React.Component {
constructor(props){
super(props);
}
render(){
return(
<div>
<button onClick={this.props.addItem}>Add</button>
</div>
)
}
}
class App extends React.Component {
constructor(props){
super(props);
}
addItem(){
console.log('hey');
}
render() {
return (
<div>
<Form addItem={this.addItem} />
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('app'));

this.state is not working in render() and there is no error found

This is small code snippet. I am trying to use this.state , but its not working.
import React from "react";
import Header from './Header';
import Footer from './Footer';
export default class Layout extends React.Component{
constructor(){
super();
this.state = {name: "sanu"};
}
render(){
return(
<div>
{this.state.name}
<Header />
<Footer />
</div>
);
}
}
I took your code and put it in a codepen
https://codepen.io/anon/pen/JJXjPe#anon-login
It works fine. Are you running Babel?
HTML
<div id="app"></div>
JS
class Layout extends React.Component{
constructor(){
super();
this.state = {name: "sanu"};
}
render(){
return(
<div>
{this.state.name}<br/>
Header <br/>
Footer <br/>
</div>
);
}
}
ReactDOM.render(
<Layout/>,
document.getElementById('app')
);

Child prop value not updated on Window , but i can see it get updated in console

I dont know what i am doing wrong in this code, the prop value 'number' is not updating on front end , although in the console logs it value does get increament.
import React from 'react';
import { render } from 'react-dom';
class Parent extends React.Component{
constructor(props){
super(props);
this.number=0;
this.changeValue=this.changeValue.bind(this);
}
changeValue(){
console.log('-------------this.number',this.number);
this.number=this.number+1;
}
render(){
return(
<div>
<Child callMe={this.changeValue} increaseNo={this.number}></Child>
</div>
)
}
}
class Child extends React.Component{
render(){
return(
<div>
<button onClick={this.props.callMe}>CLick Me</button>
<h1>{this.props.increaseNo}</h1>
</div>
)
}
}
render(<Parent/> , document.getElementById('root'));
You have to store this.number inside the component state, the component will only be re-rendered if its state changes or it receives new props.
class Parent extends React.Component{
constructor(props){
super(props);
this.state = {
number: 0
}
this.changeValue=this.changeValue.bind(this);
}
changeValue(){
this.setState({number: this.state.number + 1});
}
render(){
return(
<div>
<Child callMe={this.changeValue} increaseNo={this.state.number}></Child>
</div>
)
}
}
class Child extends React.Component{
render(){
return(
<div>
<button onClick={this.props.callMe}>CLick Me</button>
<h1>{this.props.increaseNo}</h1>
</div>
)
}
}
jsfiddle

What is the use of State key in react-router Link?

I just passed an object in state as below, but the data is not passed in state.
import React from 'react';
export default class Home extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<h2> Home Page </h2>
<Link to='/link2' state={{testing: this.state.JSONData}} target='_blank'>
About
</Link>
</div>
);
}
}
and accessed the state passed in a link as below,
import React from 'react';
export default class About extends React.Component {
constructor(props) {
super(props);
}
render() {
console.log(this.props.location.state.testing);
return (
<div>
<h2> LinPage </h2>
</div>
);
}
}
It returned null.

Resources