I have a MySVG react component which has another composed component inside called svgbox. I can't see svgbox rendering. If I use the svg to draw the rectangle (currently in the svgbox) in the MySVG directly, it works.
What change I have to make the composed svgbox to work?
mysvg.js:
import React from 'react'
import svgBox from 'svgbox'
export default class MySVG extends React.Component {
constructor () {
super();
}
render() {
return (
<div className="row">
<div className="col-md-12">
<svg width="700" height="500">
<svgBox/>
</svg>
</div>
</div>
);
}
}
svgbox.js
import React from 'react'
export default class svgBox extends React.Component {
constructor () {
super();
}
render() {
return (
<g transform="translate(50, 20)">
<rect width="100" height="200" styles="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)"/>
</g>
);
}
}
I see 3 posible problems here. You must capitalize the component. Use ./ in import from. Use a space before the closing />.
import React from 'react'
//import svgBox from 'svgbox'
import SvgBox from './svgbox'
export default class MySVG extends React.Component {
constructor () {
super();
}
render() {
return (
<div className="row">
<div className="col-md-12">
<svg width="700" height="500">
//<svgBox/>
<SvgBox />
</svg>
</div>
</div>
);
}
}
Is your component properly exported/imported ?
Related
I am trying to show the number 0 on the screen using props. However nothing shows on the screen and I am not sure why. This is the code:
import React,{Component} from 'react';
import Toolbar from './Toolbar.js';
class Counter extends Component {
constructor(props) {
super(props);
this.state ={
counter:0
}
};
render() {
return(
<div>
{this.state.counter.map(count=>(
<Toolbar count={count}/>
))}
</div>
)
}
};
export default Counter;
And this is where I called it
<div className="toolbar__cart">
<span>{props.count}</span>
<img src="Images/basket.png" alt="Basket" width="40"/></div>
I don't think the map function is applicable here since the value of counter is an integer and not an array. See here for more info on the map function.
If you just want your Toolbar component to display the value of this.state.counter, you could use this:
return(
<Toolbar count={this.state.counter}></Toolbar>
)
And then your Toolbar component would use that counter value like this:
function Toolbar(props) {
return (
<div>
<span>{props.count}</span>
<img src="Images/basket.png" alt="Basket" width="40"/>
</div>
)
}
You are using map function incorrectly.
.map is a function used along with an array
Check out : https://www.w3schools.com/jsref/jsref_map.asp
Correct Code :
render() {
return (
<div>
<Toolbar count={this.state.counter} />
</div>
);
}
You can checkout full code here : https://codesandbox.io/s/naughty-lederberg-hb4wp?file=/src/App.js:203-309
counter.map map function for Arrays - sample
import React,{Component} from 'react';
import Toolbar from './Toolbar.js';
class Counter extends Component {
constructor(props) {
super(props);
this.state ={
counter:[0,1,2]
}
};
render() {
return(
<div>
{this.state.counter.map(count=>(
<Toolbar count={count}/>
))}
</div>
)
}
};
I am learning React
While working on Props, I have created a component and using that component in my index.jsx. But the values passed through props are not displayed on the UI.
usingprops.jsx
import React from 'react';
class UsingProps extends React.Component {
render() {
return (
<div>
<p>{this.props.headerProp}</p>
<p>{this.props.contentProp}</p>
</div>
);
}
}
export default UsingProps;
index.jsx
import React from 'react';
import UsingProps from './Props/UsingProps.jsx';
class App extends React.Component {
render() {
return (
<div>
<UsingProps />
</div>
);
}
}
const myElement = <App headerProp="Header from props!!!" contentProp="Content from props!!!" />;
ReactDOM.render(myElement, document.getElementById('root'));
export default App;
You are putting the headerProp on the App component, not the UsingProps component, which is where you are trying to access it. You need to revise it to this:
class App extends React.Component {
render() {
return (
<div>
<UsingProps headerProp="Header from props!!!" contentProp="Content from props!!!" />
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('root'));
So I am trying to learn how to use the npm library, and I found this carousel. I implemented it into my project, but I am unsure about how to change the attributes. Here is the doc: https://www.npmjs.com/package/react-responsive-carousel
and here is my current code:
import React, { Component } from 'react';
import "react-responsive-carousel/lib/styles/carousel.min.css";
import { Carousel } from 'react-responsive-carousel';
import Project1 from './Project1'
import Project2 from './Project2'
class Projects extends Component {
constructor(props){
super(props)
this.state = {
showArrows: 'false',
showIndicators: 'false'
}
}
render() {
const styles = {
display: 'none'
}
return (
<Carousel>
<div>
<Project1 />
</div>
<div>
<img style = {styles}src="http://lorempixel.com/output/cats-q-c-640-480-1.jpg" />
<Project2 />
</div>
</Carousel>
);
}
};
export default Projects
You can do it as you will do for normal components.
<Carousel showArrows={false} showIndicators={false}>
Refer for demos.
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
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.