I am having trouble importing img from my folder.
My code looks something like this
Champion
class Champion extends Component{
render(){
return(
<div className = "championDiv">
<div>
<img src= {'../pic' + this.props.picSource} />
</div>
</div>
)
}
}
export default Champion;
Index.js
//component
import Champion from './Champion/Champion';
//json
import ChampionData from '../champion.json';
class Index extends Component{
render(){
return(
<div className = "championsDiv">
<Champion
picSource = {ChampionData.data.bob.imageurl}/> //string bob.png
</div>
)
}
}
export default Index;
And for some reason it shows the null image icon.
It is weird since I am able to import my picture by:
import React, {Component} from 'react';
import Bob from '../pic/bob.png';
class Champion extends Component{
render(){
return(
<div className = "championDiv">
<div>
<img src= {Bob} />
</div>
</div>
)
}
}
export default Champion;
However, I dont want to import all 250 images individually.
Any ideas how I can solve this issue?
In your index component, you need to use require to include your images source.
//component
import Champion from './Champion/Champion';
//json
import ChampionData from '../champion.json';
class Index extends Component{
render(){
return(
<div className = "championsDiv">
<Champion
picSource = {require(ChampionData.data.bob.imageurl)}/> //string bob.png
</div>
)
}
}
export default Index;
Or you must import your images first.
import React from "react";
import ReactDOM from "react-dom";
function App() {
return (
<img
src="https://images.pexels.com/photos/20787/pexels-photo.jpg?auto=compress&cs=tinysrgb&h=350"
alt="new"
/>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
Try this way...
//component
import Champion from './Champion/Champion';
//json
import ChampionData from '../champion.json';
var images = require.context('../images/yourImageFolder', true);
class Index extends Component{
render(){
return(
<div>
<img src= {images(`./imageName.png`)} />
</div>
)
}
}
export default Index;
Related
When I use tag as shown below, I'm getting this error!
React TypeError: Class constructor Fullpage cannot be invoked without 'new'
It looks like something went wrong in line 1438:
renderWithHooks
node_modules/react-dom/cjs/react-dom.development.js:14803
this is my Fullpage.js file:
import React, {Component} from 'react';
import './Fullpage.css'
class Fullpage extends Comment{
render(){
const {children}=this.props
return(
<div className={`fullpage ${this.props.className || ''}`}>
{children}
</div>
);
}
}
export default Fullpage
App.js file:
import React, { Component } from 'react'
import data from './data.json';
import logo from './logo.svg';
import './App.css';
import { SocialIcon } from 'react-social-icons';
import Fullpage from './components/Fullpage.js'
class App extends Component{
render(){
return(
<div className="App container">
<div className="navigation">
</div>
<Fullpage className="first">
<h1 className="title" id={"title"}>
{data.title}
</h1>
<div>
<h2>
{data.subtitle}
</h2>
</div>
<div className="icons-wrapper">
{
Object.keys(data.links).map(key=>{
return(
<div className="icon">
<SocialIcon url={data.links[key]}/>
</div>
);
})
}
</div>
</Fullpage>
<div className="fullpage">
<h3>
{data.sections[0].title}
</h3>
<p>
{data.sections[0].items[0].content}
</p>
</div>
<div className="fullpage">
</div>
</div>
);
}
}
export default App;
Looks like there should be: class Fullpage extends Component not Comment.
I am getting an "TypeError: this is undefined" error even after I am binding this to the function in the constructor. I have also tried to use handleChange={this.handlChange.bind(this)} instead of this.handleChange = this.handleChange.bind(this) but it doesn't work. I am watching React tutorial and I wrote the same code as the tutor did, the code is working fine in his IDE but is showing error in mine.
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
App.js
import React from 'react';
import './css/App.css';
import Header from "./components/Header"
import MainContent from "./components/MainContent"
import Footer from "./components/Footer"
class App extends React.Component {
render(){
return (
<div>
<Header />
<MainContent />
<Footer />
</div>
)
}
}
export default App;
MainContent.js
import React, {Component} from "react"
import ListItem from "./ListItem"
import tasks from "./tasks"
class MainContent extends Component
{
constructor()
{
super()
this.state =
{
tasks: tasks
}
this.handleChange = this.handleChange.bind(this);
}
handleChange(completed)
{
alert(completed)
}
render()
{
const taskComponents = this.state.tasks.map(function(data)
{
return <ListItem key={data.id} task={data.task} completed={data.completed} handleChange={this.handleChange} />
})
return (
<div>
{taskComponents}
</div>
)
}
}
ListItem.js
import React from "react"
let i=1;
class ListItem extends React.Component
{
render()
{
return (
<div>
<p style={{color : i%2 ? "black" : "orange"}}>
<input type="checkbox" checked={this.props.completed}
onChange={function(){
this.props.handleChange(this.props.completed)
}}>
</input> Task {i++} : <b>{this.props.task}</b>
</p>
</div>
)
}
}
export default ListItem
I'm trying to insert a child component inside another child component, but my code is not working. Following codes are the structure i'm trying to build.
const AddProductPage= () => {
return (
<PageTemplate>
<ProductTemplate>
<AddProduct />
</ProductTemplate>
</PageTemplate>
);
};
const PageTemplate= ({children}) => {
return (
<div className={cx('pagetemplate')}>
<HeaderContainer />
<main>
{children}
</main>
<Footer />
</div>
);
};
class ProductTemplate extends Component {
render() {
return (
<div className={cx('product-template')}>
...
<div className={cx('display')}>
{this.props.children}
</div>
</div>
);
}
}
class AddProduct extends Component {
render() {
return (
<div className={cx('addproduct')}>
addproduct
</div>
);
}
}
I'm trying to insert AddProduct component in ProductTemplate component as a child, which is inserted in PageTemplate component as a child. AddProductPage, however, is not showing AddProduct component. I'd be grateful if anyone can help.
I've run your code. May be you'r missing default export statements.
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import AddProductPage from './AddProductPage';
ReactDOM.render(<AddProductPage />, document.getElementById('root'));
AddProductPage.js
import React from 'react';
import PageTemplate from './PageTemplate';
import ProductTemplate from './ProductTemplate';
import AddProduct from './AddProduct';
const AddProductPage= () => {
return (
<PageTemplate>
<ProductTemplate>
<AddProduct />
</ProductTemplate>
</PageTemplate>
);
};
export default AddProduct;
PageTemplate.js
import React from 'react';
const PageTemplate= ({children}) => {
return (
<div>
<main>
{children}
</main>
</div>
);
};
export default PageTemplate;
ProductTemplate.js
import React,{Component} from 'react';
class ProductTemplate extends Component {
render() {
return (
<div>
<div>
{this.props.children}
</div>
</div>
);
};
};
export default ProductTemplate;
AddProduct.js
import React, {Component} from 'react';
class AddProduct extends Component {
render() {
return (
<div>
addproduct
</div>
);
};
};
export default AddProduct;
Output is this :
addproduct
Here`s a Fiddle of your code
Works Fine!. I have removed cx API. I suppose the problem might be with className resolution. Check in the dom hierarchy weather the Children DOM Node exists and they have received their respective classnames.
const PageTemplate= ({children}) => {
return (
<div className={'pagetemplate'}>
<HeaderContainer />
<main>
{children}
</main>
<Footer />
</div>
);
};
I am trying to follow this tutorial to create a pagination in my application https://www.npmjs.com/package/react-js-pagination#usage . The pagination part works fine. How to create previousPageClick, nextPageClick functions for the course component so the page will display different set of records based on the page number? Thanks.
My App.js code:
import React, { Component } from 'react';
import './App.css';
import axios from 'axios';
import Pagination from "react-js-pagination";
require("bootstrap-less/bootstrap/pagination.less");
class App extends Component {
constructor() {
super();
this.state ={
courses:[],
activePage: 15
};
}
componentDidMount(){
axios.get('myURL')
.then(response=>{
this.setState({courses:response.data});
});
}
handlePageChange(pageNumber) {
this.setState({activePage: pageNumber});
}
render() {
const courses= this.state.courses.map(course=>(<Course ID={course.ID} coursename={course.coursetitle} />));
const totalCourses=courses.length;
return (
<div className="App">
<div className="pagination">
Total Classes: {totalCourses}
<Pagination
activePage={this.state.activePage}
itemsCountPerPage={100}
totalItemsCount={totalCourses}
pageRangeDisplayed={5}
onChange={this.handlePageChange.bind(this)}
/>
</div>
<div className="Course">Courses: {courses}
</div>
</div>
);
}
}
export default App;
ReactDOM.render(<App />, document.getElementById("root"));
Course.js
import React from 'react';
const course=props=>{
return(
<div className="Course">
<p>ID: {props.ID}</p>
<p>SUBJECT: {props.SUBJECT}</p>
</div>
);
}
export default course;
Hi the previous answers to similar Questions doesn't help me.
I have the App Component:
import React from "react";
import Header from "./components/Header";
import Menu from "./components/Menu";
import Board from "./components/Board";
class App extends React.Component {
constructor() {
super();
this.onButtonClick = this.onButtonClick.bind(this);
this.state = {
condition: true
};
}
onButtonClick() {
console.log("clicked...");
this.setState({
condition: !this.state.condition
});
}
render() {
return (
<div className="App">
<Header />
<Menu condition={this.state.condition} />
<Board />
</div>
);
}
}
export default App;
the MenuIcon Component:
import React from "react";
import "../css/main.css";
class MenuIcon extends React.Component {
render() {
return (
<div className="Menu_icon" onClick={this.props.onButtonClick}>
<div className="Menu_icon_element" />
<div className="Menu_icon_element" />
<div className="Menu_icon_element" />
</div>
);
}
}
export default MenuIcon;
and the Menu Component
import React from "react";
import "../css/main.css";
class Menu extends React.Component {
render() {
return (
<div className={this.props.condition ? "Menu inactive" : "Menu active"}>
<ul>
<li>Notes</li>
<li>Erinnerungen</li>
</ul>
</div>
);
}
}
export default Menu;
import React from "react";
import "../css/main.css";
class Menu extends React.Component {
render() {
return (
<div className={this.props.condition ? "Menu inactive" : "Menu active"}>
<ul>
<li>Notes</li>
<li>Erinnerungen</li>
</ul>
</div>
);
}
}
export default Menu;
and the Header Component
import React from "react";
import "../css/main.css";
import MenuIcon from "./MenuIcon";
class Header extends React.Component {
render() {
return (
<div className="Header_container">
<MenuIcon onButtonClick={this.props.onButtonClick} />
<div className="Header_headline">Notes</div>
</div>
);
}
}
export default Header;
I want to trigger the onButtonClick defined in App.js every time when I click on the MenuIcon. And then the Menu should fade in or out. The animation is done with css.
I dont find my mistake?
Could someone please help me?