props property not seen in react component class - javascript

I am starting to learn react and am currently using Visual Studio 2017 to code a basic hello world web app. My index.html file is as follows:
<body>
<div id="root"></div>
<!-- scripts -->
<script src="./dist/app-bundle.js"></script>
</body>
while my app.tsx file is as follows (app.tsx is transpiled to ./dist/app-bundle.js):
declare var require: any
var React = require('react');
var ReactDOM = require('react-dom');
class Hello extends React.Component {
render() {
return (
<h1>Welcome to dsdasd!!</h1>
);
}
}
ReactDOM.render(<Hello />, document.getElementById('root'));
The above two files work fine. However, when I try to use the props property (shown below in the modified app.tsx) in the Hello class, the transpiler shows errors,
declare var require: any
var React = require('react');
var ReactDOM = require('react-dom');
class Hello extends React.Component {
render() {
return (
<h1>Welcome to {this.props.message}!!</h1>
);
}
}
ReactDOM.render(<Hello message = "some message"/>, document.getElementById('root'));
ERROR: TS2339: Property 'message' does not exist on type '()'
How can I resolve this error? My understanding is that the props and state are always available in a react component. Any help is greatly appreciated.

You need to specify the props interface for a Typescript + React component:
interface Props {
message: string;
}
class Hello extends React.Component<Props> {
render() {
return (
<h1>Welcome to {this.props.message}</h1>
);
}
}

Related

React App is giving error when using context API

I am learning React and right now trying to implement the old way of working with Context API but when I try to compile I get an error.
It says :
TypeError: context is undefined. Version is 17.0.1
Here are the files I use:
Test0.js
import React from 'react';
const Test0 = React.createContext();
export default Test0;
Test1.js
import React, { Component } from 'react';
import Test0 from './Test0';
class Test1 extends Component{
render(){
return (
<Test0.Consumer>
{context => (<p>This is {context.name}</p> )}
</Test0.Consumer>
);
}
}
export default Test1;
Test2.js
import React, { Component } from 'react';
import Test0 from './Test0';
import Test1 from './Test1';
class Test2 extends Component{
state = {
name: 'James',
age : 30
}
render(){
return (
<Test0.Provider
value={{
name : this.state.name,
age: this.state.age
}}
>
<Test1 />
</Test0.Provider>
);
}
}
export default Test2;
I then render <Test1 /> in app.js
I then render < Test1 /> in app.js
You need to render Test2 because you define your Context Provider there. Below is the link for the full working code.
CODESANDBOX LINK: https://codesandbox.io/s/context-api-issue-lqkv8
You're using Test1 component which consumes Test0, a context, that you suppose to provide values, but in Test0 you're providing no value. You wrongly implemented the provider in separate Component, Test2, that you don't render so Test0 doesn't know about the provided values and it's assuming you didn't define the context.

React is showing "Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render"

Heres the main game.js and app.js file:
//Heres the game file//
import React, { Component } from "react";
class Game extends Component {
constructor(props) {
super(props);
this.state = { num: 0 };
this.numPicker = this.numPicker.bind(this);
}
numPicker(e) {
let rand = Math.floor(Math.random() * this.props.maxNum);
return rand;
}
render() {
return (
<div>
<h1>Hellow World {this.numPicker}</h1>
</div>
);
}
}
export default Game;
//Heres the main file://
import React from "react";
import "./App.css";
import Game from "./game";
function App() {
return (
<div className="App">
<Game maxNum={1} />
</div>
);
}
export default App;
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
on the game.js file I used the numPicker function inside an H1. Now I am getting this error:
Warning: Functions are not valid as a React child. This may happen if you return a Component instead of from render. Or maybe you meant to call this function rather than return it.
You need to invoke the numPicker function that returns a data which can then be rendered
<h1>Hellow World {this.numPicker()}</h1>

React.js fetch Giphy API

I'm building a search engine (with React.js), where I can look for GIPHY gifs, using their API. I'm new to React.js and i'm having some trouble getting this code right.
import React from 'react'; //react library
import ReactDOM from 'react-dom'; //react DOM - to manipulate elements
import './index.css';
import SearchBar from './components/Search';
import GifList from './components/SelectedList';
class Root extends React.Component { //Component that will serve as the parent for the rest of the application.
constructor() {
super();
this.state = {
gifs: []
}
}
handleTermChange(term) {
console.log(term);
//---------------------->
let url = 'http://api.giphy.com/v1/gifs/search?q=${term}&api_key=dc6zaTOxFJmzC';
fetch(url).
then(response => response.json()).then((gifs) => {
console.log(gifs);
console.log(gifs.length);
this.setState({
gifs: gifs
});
});//<------------------------- THIS CODE HERE
};
render() {
return (
<div>
<SearchBar onTermChange={this.handleTermChange} />
<GifList gifs={this.state.gifs} />
</div>
);
}
}
ReactDOM.render( <Root />, document.getElementById('root'));
I get the following error in the console:
Uncaught (in promise) TypeError: _this2.setState is not a function
at eval (index.js:64)
at
Any help is appreciated :) Thanks!
this is not auto-bound in ES6 style syntax.
You have to bind in the constructor:
```
super();
this.state = {
gifs: []
}
this.handleTermChange = this.handleTermChange.bind(this)```
or use arrow function syntax for the function in question:
func = () => {};
For reference: https://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html#autobinding

react-marked: dangerouslySetInnerHTML cannot read property h1 of undefined error

I am trying to create a markdown app using React.
Here is the JSX code for it
import React,{ Component } from 'react';
import ReactDOM from 'react-dom';
import marked from 'react-marked';
class App extends Component {
constructor(){
super();
this.state = {
input: '# Heading\n\n## Sub-heading\n\n### Another deeper heading\n\nText attributes _italic_, *italic*, __bold__, **bold**, `monospace`.\n\nHorizontal rule:\n\n---\n\nBullet list:\n* apples\n* oranges\n* pears\n\nNumbered list:\n1. apples\n2. oranges\n3. pears\n\nA [link](http://example.com).'
}
}
onInputChange(event){
let currinput = event.target.value;
this.setState({input: currinput})
}
MarkIt(){
// let output = marked(this.state.input, {sanitize: true}) ;
return { __html: marked(this.state.input, {sanitize: true})};
}
render(){
return (
<div>
<textarea
value = {this.state.input}
onChange = {this.onInputChange.bind(this)}
>
</textarea>
<div dangerouslySetInnerHTML={this.MarkIt()}>
</div>
</div>);
}
}
ReactDOM.render(<App />,document.querySelector("#container"));
I am not able to figure out why it is giving cannot read propery 'h1' of undefined error on execution.
I've looked into official react docs provided by facebook but still I haven't figured out the exact reason behind this error.
That's because react-marked returns the React node, not the HTML as it's handled in the 'Minimal usage:' section in the readme.
Good news though! You can just use like this:
MarkIt() {
return marked(this.state.input, {sanitize: true});
}
...
<div>
{this.MarkIt()}
</div>
Just needed to use marked library instead of react-marked

Exporting functions with reactjs and babel

I have a project using reactjs, which is transpiled by babel. I use the es2015 and react transforms in my .babelrc. I am currently refactoring and in my first pass I basically did export class foo for everything I needed. A lot of these classes should really just be functions, so I am trying to rewrite them as such, but I keep getting the same error. My main application file looks somethings like this:
import React, { Component } from 'react';
import {Foo, Bar} from './components/ui.js';
class Application extends Component {
constructor(props){
super(props);
this.state = {
object: null
}
}
componentDidMount(){
// code
}
componentDidUpdate(){
// other code
}
render(){
return(
<div>
<Foo />
<Bar />
</div>
)
}
}
module.exports = Application
And my import from ui.js is like this:
import React, { Component } from 'react';
export class Foo extends Component {
constructor(props){
super(props);
}
render() {
return (
// Some JSX
)
}
}
export class Bar extends Component {
constructor(props){
super(props);
}
render() {
return (
// Some other JSX
)
}
}
When I try and change one of these exported classes to a function, for example:
// Note: I have tried a variety of syntax such as function, const, etc...
export var Bar {
render() {
return (
// Some other JSX
)
}
}
I get the following error:
SyntaxError: Unexpected token <line where I declare a function>
I am not sure what I am doing wrong, and my google searches are only coming up with answers to other problems.
It's the same as defining the function as a variable but just adding export to the front e.g. (using ES6 syntax)
export const render = () => (
// Some other JSX
);
or alternatively
export var render = function() {
return (
// Some other JSX
);
};
Exporting functions is no different than exporting class. Basic rules must be followed .
Function/Class name should in CAPS
There will be only one "export" line .
Every function return body should have a single tag encompassing other parts. Most commonly used is a tag .
This usually works: import App from "./App"; where App.js is my jsx file.
You can do an explicit import too . : import AllApp from "./classhouse.jsx";
Name of the js/jsx file does not matter. It can be anycase (lower, upper).
For returning multiple functions from one file, you need to create one more function , that encompasses all other functions .
See the example below showing multiple functions returned.
import React from 'react';
/* All function / class names HAS TO BE in CAPS */
var App1 = function (){
return (
<div>
<h1>
Hello World
</h1>
</div>
)
}
var App2 = function (){
return (
<div>
<h1>World Number 2 </h1>
</div>
);
}
var AllApp = function (){
return (
<div>
<App1 />
<App2 />
</div>
);
}
export default AllApp;
My index.js file:
import React from 'react';
import ReactDOM from "react-dom";
import AllApp from "./classhouse.jsx"; /* Note: App name has to be in CAPS */
import App from "./App";
const jsx =
<div>
<AllApp />
<App />
</div>
ReactDOM.render(jsx, document.getElementById("root"));
You are writing functional components in wrong way.
function Welcome() {
return <h1>Hello World</h1>;
}
or
const Welcome = () => {
return <p>Hello Wrold</p>
}
export default Welcome ;
ES6 doesn't allow export default const. You must declare the constant first then export it.

Categories

Resources