Develop Reference

Linking Image Issue

I am trying to link my picture but it's not working
Any idea what I have forgotten?
Code:
import React, { Component } from 'react';
export default class Card extends Component {
render() {
return (
<div>
<img src="../img/img_avatar.png" alt="Card"></img>
</div>
);
}
}
[Structure][1]

Images are self-closing tags, so you would use it like:
<img src="../img/img_avatar.png" alt="Card" />
instead of what you're using.

cannot export react class

Having this file:
Product.jsx:
class Product extends React.Component{
render(){
return (
<div className='item'>
<div className='image'>
<img src="images/products/image-aqua.png" />
</div>
<div className="middle aligned content">
<div className="description">
<a>Fort Knight</a>
<p>Authentic renaissance actors, delivered in just two weeks.</p>
</div>
<div className="extra">
<span>Submitted by:</span>
<img src="images/avatars/daniel.jpg" className="ui avatar image" />
</div>
</div>
</div>
)
}
}
export default Product;
and ProductList.jsx:
import Product from "./Product";
class ProductList extends React.Component{
render(){
return (
<div className='ui unstackable items'>
<Product />
</div>
)
}
}
ReactDOM.render(
<ProductList />,
document.getElementById('content')
);
The React Class <Product /> is not rendered (If I try to simply paste the Product class into ProductList.jsx, no problem then, but I want separate files for each class, how to achieve that?)

Use in Product.jsx the import React from "react";
demo in stackblitz

First import React at the top.
import React from "react";
Second you might be giving the wrong address at the top. Make sure it is right. You know the path well. Apart from these I don't see any problem with the code.
import Product from "./Product";

How to add a button link in header of home page but different in others?

I need to add a button of login and sign up in the header of first page, but it different from others page. I am just a new to react.js, just have some of the knowledge of this hope anyone of you will help me. If you need more detail, please comments at below.
Here is my home page:
class Welcome extends Component {
constructor(props){
super();
this.state ={
appName: 'Event Management System'
}
}
render(){
return (
<div className="row small-up-2 medium-up-3 large-up-4">
<div className="column">
<h2> Project Description </h2>
Login
SignUp
</div>
</div>
);
}
}
Here is App.js:
class App extends Component {
constructor(props){
super();
this.state ={
appName: 'Event Management System'
}
}
render(){
return (
<div className="off-canvas-wrapper">
<div className="off-canvas-wrapper-inner" data-off-canvas-wrapper>
<div className="off-canvas-content" data-off-canvas-content>
<MobileHeader name={this.state.appName}/>
<Header name={this.state.appName}/>
<Routes />
<hr/>
<Footer />
</div>
</div>
</div>
);
}
}
and here is header.js
class Header extends Component {
render(){
return (
<div className="callout primary" id="Header">
<div className="row column">
<h1> {this.props.name} </h1>
</div>
</div>
);
}
}
What i need is like this in first page:

In your header component you can put this in your return:
{document.pathname === '/home' ? <button></button> : ""}
(Edit: remember that a jsx requires everything to be wrapped in one element, so if you're showing 2 buttons you'll have to do this twice or wrap the two button elements in another element like a div)
Essentially render the button IF document.pathname EQUALS the path of the page you want it to show on. If you're using state to manage the page rather than a router, use the state for your condition instead.

How to create a Component on Click React

I'm relatively new to React and I am trying to create a web application that creates the Rnd component when I click a button. When I click the button I can only get it to create one Rnd component even though it still registers all the clicks. Any help would be great.
import { Meteor } from 'meteor/meteor';
import React from 'react';
import ReactDOM from 'react-dom';
import { render } from 'react-dom';
import Rnd from 'react-rnd';
export default class App extends React.Component {
renderWidget() {
console.log('I was clicked');
const widget = React.createElement(Rnd, {default: {x: 0, y: 0, width: 320, height: 200}, className: 'box'}, React.createElement('p', {}, this.state.text));
ReactDOM.render(
widget,
document.getElementById('widget')
);
}
render () {
return (
<div>
<section className='hero is-dark'>
<div className='hero-body'>
<div className='container'>
<h1 className='title'>
Dashboard
</h1>
<h2 className='subtitle'>
At A Glance Data
</h2>
</div>
</div>
</section>
<section className='section'>
<div className='container has-text-right'>
<h2 className='subtitle'>
Create New Widget
</h2>
<button className='button is-dark is-outlined' onClick={this.renderWidget.bind(this)}>
<span className='icon'>
<i className='fas fa-plus'></i>
</span>
</button>
</div>
<div id='widget'>
</div>
</section>
</div>
);
}
}

Here's one way you could go about doing what you want:
import React from "react";
import { render } from "react-dom";
import Rnd from "react-rnd";
const Widget = () => <p>Hello World</p>;
export default class App extends React.Component {
constructor() {
super();
this.state = {
components: [],
text: "Hello to you"
};
}
renderWidget() {
console.log("I was clicked");
const newComponents = [...this.state.components, Widget];
this.setState({
components: newComponents
});
}
render() {
const { components } = this.state;
return (
<div>
<section className="hero is-dark">
<div className="hero-body">
<div className="container">
<h1 className="title">Dashboard</h1>
<h2 className="subtitle">At A Glance Data</h2>
</div>
</div>
</section>
<section className="section">
<div className="container has-text-right">
<h2 className="subtitle">Create New Widget</h2>
<button
className="button is-dark is-outlined"
onClick={this.renderWidget.bind(this)}
>
<span className="icon">
<i className="fas fa-plus" />
Click me
</span>
</button>
</div>
<div>
{components.length !== 0 &&
components.map((Widget, i) => <Widget key={i} />)}
</div>
</section>
</div>
);
}
}
render(<App />, document.getElementById("widget"));

I don't have possibility to run your code but at quick glance I would probably not use ReactDOM.render to render new component every time the button is clicked. Instead I'd add array e.g. "generatedComponents" to the App-component's state and every time you click the button, it would add a new component to that array. Then you render the components in that array at the App-components render method.
Also I wouldn't use variable type const in the renderWidget-function, but instead let or var.

Onclick event handler with passing this in reactjs

My component is as below:
import React, {PropTypes} from 'react';
export default class Viewdesc extends React.Component {
render() {
return (
<div className="col-md-12 slide-row">
<div className="col-md-12 overview-about-property">
<div className="expandabletext less">
<div className="col-md-12" dangerouslySetInnerHTML={{__html: this.props.record.ABOUT}}></div>
</div>
<div className="showmore"> Show More </div>
</div>
</div>
);
}
}
I want to call function say showmorefunct() passing clicked handler like this in jquery. How can I do this?

You can bind you function and pass params which you want, if you want to. You can do something like :
class Test extends React.Component {
handleClick(param, e){
console.log(e);
console.log(param);
}
render(){
return (
<div className="showmore" onClick={this.handleClick.bind(this, "Some param if you need it")}> Show More </div>
)
}
}
React.render(<Test />, document.getElementById('container'));
Here is fiddle.

UPDATE
http://jsfiddle.net/jwm6k66c/1517/
I don't quite really understand your question, but I imagine you want this-
import React, {PropTypes} from 'react';
export default class Viewdesc extends React.Component {
constructor(props) {
super(props)
this.showMoreFunct = this.showMoreFunct.bind(this)
}
showMoreFunct() {
alert('Show more clicked!')
}
render() {
return (
<div className="col-md-12 slide-row">
<div className="col-md-12 overview-about-property">
<div className="expandabletext less">
<div className="col-md-12" dangerouslySetInnerHTML={{__html: this.props.record.ABOUT}}></div>
</div>
<div className="showmore"> <span onClick={this.showMoreFunct}>Show More</span> </div>
</div>
</div>
);
}
}
You can replace span with a or button. You just need to specify the function you want to call to onClick prop. React will call it automatically when the user clicks on that span.