i've a component that i import, but its not displayed on the page.
this is my app.js file. i imported the <player/>component but it is not getting displayed properly on the browser.
import React, { Component } from "react";
import logo from "./logo.svg";
import "./App.css";
import { player } from "./player";
class App extends Component {
render() {
return (
<div className="App">
<div>
<player />
</div>
</div>
);
}
}
export default App;
this is the contents of the player.js
import React from "react";
import { Button } from "evergreen-ui";
export default class player extends React.Component {
constructor(...args) {
super(...args);
this.state = {
shoot: 0
};
}
shoot() {
this.setState.shoot = Math.floor(Math.random() * Math.floor(3));
}
render() {
return (
<div>
<h1>hello there</h1>
<h1>{this.state.shoot}</h1>
<Button onClick={() => this.shoot}>Shoot another
value</Button>
</div>
);
}
}
In your code, you've exported your player component as a default export
export default class player extemds React.Component
But in your import of it in the other file, you're importing it as a named export
import { player } from "./player";
Try importing it without the curly braces as you would with a default export
import player from "./player";
You are doing two mistakes:
1. Importing the component in the wrong way
2. Rendering the component in the wrong way
Solution
The component should be imported without the curly braces
The react component "player" is supposed to start with capital letters i.e. it should be renamed as Player
Below is the working code I have tried in my local machine. It only modifies App.js
import React, { Component } from "react";
import logo from "./logo.svg";
import "./App.css";
import Player from "./player"; // imported without curly braces and with capital first letter
class App extends Component {
render() {
return (
<div className="App">
<div>
<Player /> {/* Rendering the correct way */}
</div>
</div>
);
}
}
export default App;
Sidenote
In player.js, you are setting the state in the wrong fashion, it won't work because:
setState is a method and not a object
this is not binded with method shoot. It will throw error something like "cannot read this of undefined" or something
Modify your player.js as following:
import React from "react";
import { Button } from "evergreen-ui";
export default class player extends React.Component {
constructor(...args) {
super(...args);
this.state = {
shoot: 0
};
}
shoot = ()=>{
this.setState({
shoot: Math.floor(Math.random() * Math.floor(3)),
});
}
render() {
return (
<div>
<h1>hello there</h1>
<h1>{this.state.shoot}</h1>
<Button onClick={() => this.shoot()}>Shoot another
value</Button>
</div>
);
}
}
You have two main issues:
1) You export as default and then your import is wrong.
If you export as:
export default class player extemds React.Component
Then you need to import as:
import player from "./player";
2) Components must start uppercase, otherwise React thinks that they are simple HTML tags and not components.
So you must change player to Player everywhere
Related
I have a component that I want to show in another site.
components/Hello.js
import React from 'react';
export default class Hello extends React.Component {
render() {
return (
<div><p>Hello</p></div>
)
};
};
Now I want to import it into my site named "Profile.js".
pages/Profile.js
import React from 'react';
import Hello from '../components/Hello';
export default function Profile() {
return(
<div>
{/* Say hello*/}
{Hello}
</div>
);
}
What am I doing wrong? Why wont it say hello on my "Profile.js" page?
React syntax for rendering components is as follow :
export default function Profile() {
return(
<div>
{/* Say hello*/}
<Hello/>
</div>
);
}
I'm a beginner in React so trying to get hands on the language. But I'm getting the below error while compiling my code.
Below are the code of my Person and App components
Person Component:
import React from 'react';
const person = () => {
return <p>I'm a person</p>;
}
export default Person;
App Component:
import React, { Component } from 'react';
import './App.css';
import Person from './Person/Person';
class App extends Component {
render() {
return (
<div className="App">
<h1>I'm a React App</h1>
<Person/>
</div>
);
}
}
export default App;
import React from 'react';
const person = () => {
return <p>I'm a person</p>;
}
export default Person;
You have a typo here: your component's name should start with a capital letter (here you named it person, but it should be Person, as a component name always start with a capital), so in order to fix it you have to write it like this:
const Person = () => {
return <p>I'm a person</p>;
}
One component Landing.js has following code::
import React, { Component } from 'react'
import NewsSearch from '../NewsSearch/NewsSearch';
import NewsLatest from '../NewsLatest/NewsLatest';
import './Landing.css';
import axios from 'axios';
class Landing extends Component {
state={
newsList: []
}
componentDidMount(){
axios.get(`https://api.nytimes.com/svc/topstories/v2/home.json?api-key=7cK9FpOnC3zgoboP2CPGR3FcznEaYCJv`)
.then(res=> {
this.setState({newsList: res.data.results});
});
}
render() {
// console.log(this.state.newsList);
return (
<div className="landing text-center text-white">
<h1>News Portal</h1>
<div className="news-search">
<NewsSearch />
</div>
<div className="news-latest">
<NewsLatest newsList={this.state.newsList}/>
</div>
</div>
)
}
}
export default Landing;
When sending props to NewsLatest component, 2 values are getting passed: first as undefined and then when value comes then an array with the values.
In the "NewsLatest.js" file code is :::
import React, { Component } from 'react';
// import PropTypes from 'prop-types';
class NewsLatest extends Component {
newsTitle = (
this.props.newsList.map(item => (<h2>{item.title}</h2>))
)
render() {
console.log(this.props.newsList);
return (
<div>
<h2>News Latest....</h2>
{this.newsTitle}
</div>
);
}
}
export default NewsLatest;
Nothing is rendering on the UI. I dont know how to handle that. Kindly suggest something.
The issue you are facing is that you are not rendering anything (per se) cos newsTitle does not return anything.
In your code, newsTitle is an object but you need to make it a function.
Modifying NewsLatest should fix this though
import React, { Component } from 'react';
// import PropTypes from 'prop-types';
class NewsLatest extends Component {
newsTitle = () => (
this.props.newsList.map(item => (<h2>{item.title}</h2>))
)
render() {
console.log(this.props.newsList);
return (
<div>
<h2>News Latest....</h2>
{this.newsTitle()}
</div>
);
}
}
export default NewsLatest;
I'm new in React Js don't judge me bad for it. I was writing some class to learn but unfortunately I can't export and import one of my class.
import React from "react";
class Yozuvla extends React.Component{
render(){
return(
<div>
<p>Ismingiz</p>
<p>Familyagiz</p>
</div>
);
}
}
export default Yozuvla;
Here is the second class which can't be imported
import React from "react";
import yozuv from "./components/Form";
class App extends React.Component{
render(){
return (
<div>
<yozuv/>
</div>
);
}
}
export default App;
yozuv class don't show up why.browser is white like snow
Classname should be in PascalCase,
import yozuv from "./components/Form";
this should be
import Yozuv from "./components/Form";
Usage
<Yozuv/>
When you add any element like <yozuv/> (starts with small letter), react takes it as a normal HTML tag and NOT a React Component.
import React, { Component } from 'react'
// make sure the location of file is the same for Yozuvla
import Yozuvla from'./components/Form'
class App extends Component {
render() {
return (
<div>
<Yozuvla/>
</div>
)
}
}
export default App;
tell me in commit it work or not
I have been working to solve this problem for hours now. In my App component to add a new list on clicking a button i am calling a redux action as a prop which will push a new list into the list array. I don't see any errors with my code and this piece of code has worked for another component but not in the main App component. Is there anything i am doing wrong?
import React, { Component } from 'react';
import List from './components/list.react.js';
import './App.css';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux'
import {addList} from './ListAction.js';
import PropTypes from 'prop-types'
import AddIcon from './AddIcon.png';
class App extends Component {
constructor(props){
super(props);
}
getLists=()=>{
return(
this.props.lists.map((list)=>{
return(
<List key={list.id} id={list.id} ></List>
);
})
)}
render() {
debugger;
let ListId=1;
return (
<div className="Content">
<div className="Header-Wrapper"><h1>React Redux App</h1></div>
<div className="Boxes">
<List id={ListId} />
<div>{this.getLists}</div>
<div className="wrapper">
<button className = "NewCard" onClick={this.props.addList}>
<img src={AddIcon} alt="Add-Icon"></img>
Add a new List
</button>
</div>
</div>
</div>
);
}
}
App.propTypes={
lists:PropTypes.array.isRequired
}
function mapStateToProps(state){
return({lists:state.Lists})
}
function mapDispatchToProps(dispatch){
return bindActionCreators({addList:addList},dispatch)
}
export default connect(mapStateToProps, mapDispatchToProps)(App);
Edited:
use {this.getLists()} instead of {this.getList}.
(since Amir Aleahmad comment was correct answer i edited the my first)