We Keep Coding

ReactJS Props Undefined

I am learning how to use props. After taking research in either my mother language or english, I couldn't end up with a proper answer for my issue.
Please tell me why this threw errors. This is the App.js file (default)
import React from 'react';
import './App.css';
import Product7 from './componentep7/Product7';
function App() {
return (
<div>
<nav className="navbar navbar-inverse">
<div className="container-fluid">
<a className="navbar-brand" >Title</a>
</div>
</nav>
<div className="container">
<div className="row">
<div className="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<Product7 name="valiant"/>
</div>
</div>
</div>
</div>
)
}
export default App;
and this is the component file (Product7.js)
everything is fine except it returned an error at {this.props.name}
import React from 'react';
function Product7() {
return (
<div>
<div className="col-xs-5 col-sm-5 col-md-5 col-lg-5">
<a className="thumbnail">
<img src="https://yuzu-emu.org/images/game/boxart/hollow-knight.png" alt="5tr"/>
</a>
<div className="caption">
<h4>{this.props.name}</h4>
<a className="btn btn-primary">Click to enter</a>
</div>
</div>
</div>
)
}
export default Product7;
Thank you for helping me out.

Props are passed as an argument to function components. You can’t reference this.props. Access it from the props argument:
function Product7 (props) {
return (
<h4>{props.name}</h4>
)
}

don't use this in functional components, <h4>{props.name}</h4>

If you want to use the props in the component, you must define it as a parameter:
function Product7(props) {
...

You should pass props as an argument in your component.
function Product7(props){
...
}

You cant use this in functional component.
Please go through this link.
import React from 'react';
function Product7({name}) {
return (
<div>
<div className="col-xs-5 col-sm-5 col-md-5 col-lg-5">
<a className="thumbnail">
<img src="https://yuzu-emu.org/images/game/boxart/hollow-knight.png" alt="5tr"/>
</a>
<div className="caption">
<h4>{name}</h4>
<a className="btn btn-primary">Click to enter</a>
</div>
</div>
</div>
)
}
export default Product7;
[1]: https://reactjs.org/docs/components-and-props.html

When you are passing props in functional components you have to pass props as an argument for the function.
Another thing is, no need to use this keyword in functional components.
function Product7 (props) {
return (
.
.
.
<h4>{props.name}</h4>
)
}
Note: It is a good habit to practice ECMA Script 6 arrow functions when using functional components, as below.
const Product7 = (props) => {
return (
.
.
.
<h4>{props.name}</h4>
)
}

Looks like you forgot using props within the paranthesis.
function Product7 (props) {
...
...
}
Oh, and make sure not to use this.props as you are using a function based component (only class based components need using this.props)

catch the data by adding props in your function and call it without using this because you are using functional component. i suggest to learn the class component first before jumping functional component

Trying to get the src path of image in react

Im having issues getting the image src path for graph CMS using react & graphQL. The problem is the path is always returning null. I'm sure this has been asked many times but in order for me to learn I just need to see what I am doing wrong.
My query in graphQL is this:
query {
products {
id
name
price
description
createdAt
image {
id
url
}
}
}
I always get all the other information but not the image src (which returns null).
my code is as follows:
import React from 'react';
const Product = (props) => {
return (
<div className="col-sm-4">
<div className="card" style={{width: "18rem"}}>
<img src={props.product.image.url} className="card-img-top" alt={props.product.name}/>
<div className="card-body">
<h5 className="card-title">{props.product.name}</h5>
<p className="card-title">$ {props.product.price}</p>
<p className="card-title">{props.product.description}</p>
<button className="btn btn-primary" onClick={() => props.addItem(props.product)}>Buy now</button>
</div>
</div>
</div>
);
}
export default Product;
Any help would be much appreciated.

Marko Savic is right, it returns null
ANSWER: in GraphCMS you have to make sure you publish 'content' AND 'assets'
Published Assets in GraphCMS

Render different html depending on index of object in react

In my meteor project I have a collection called auctions. Using react I wish to render 3 columns of this auctions with unlimited number of rows. To accomplish this I thought it would be possible to send the index of the object but I have no idea how to do this. Another problem is that it shows an error with the html code since I'm not closing the 'div' tag.
This is my App.js:
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { withTracker } from 'meteor/react-meteor-data';
import { Auctions } from '../api/auctions.js';
import Auction from './Auction.js';
//App component - represents the whole app
class App extends Component {
renderAuctions() {
return this.props.auctions.map((auction, index) => (
<Auction key={auction._id} auction={auction} index={index} />
));
}
render() {
return (
<div className="container section">
<div className="row">
{this.renderAuctions()}
</div>
</div>
);
}
}
export default withTracker(() => {
return {
auctions: Auctions.find({}).fetch(),
};
})(App);
And my Auction.js:
import React, { Component } from 'react';
//Task component - resepresnts a single todo item
export default class Auction extends Component {
render() {
if(index % 3 === 0) {
return (
</div> /* Shows an erros here because of closing tag*/
<div className="row">
<div className="col s4 ">
<div className="card">
<div className="card-image">
<img src="images/logo.png" />
</div>
<div className="card-content">
<span className="card-title">
{this.props.auction.auctionName}
</span>
<p>
I am a very simple card. I am good at containing small bits of information.
I am convenient because I require little markup to use effectively.
</p>
</div>
<div className="card-action">
This is a link
</div>
</div>
</div>
);
} else {
<div className="col s4">
<h1>Brincoooo</h1>
<div className="card">
<div className="card-image">
<img src="images/logo.png" />
</div>
<div className="card-content">
<span className="card-title">
{this.props.auction.auctionName}
</span>
<p>
I am a very simple card. I am good at containing small bits of information.
I am convenient because I require little markup to use effectively.
</p>
</div>
<div className="card-action">
This is a link
</div>
</div>
</div>
}
}
}

Any time you return HTML from a render function it needs to be self contained and have balanced tags. That's the way React works, and why it's giving you an error.
Instead of trying to group 3 auctions at a time, you could think of using flexbox instead. With flexbox you simply render all of your auctions, and it looks after the wrapping automatically for you. Users with wider screens will see more than 3 columns, and users on mobile will see probably one when in portrait mode.
If you want to learn about flexbox, there is a cute tutorial here: https://flexboxfroggy.com/ There are plenty of tutorials around if you don't like that one, such as this: https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties
I'll let you do the work from here

React how to get item props from event.currentTarget

Does react have a clean way to get the this.props.values from a list item?
I basically want to get the current items props so I can populate a modal dialog with the data. as per below functions the custom props that I specify like 'id' are accessible, but I really would like to do something like this and have all the props
event.currentTarget.this.props.note
Handler
clicker(event){
console.log('clicking the clicker');
console.log(event.currentTarget.id);
this.setState({isEdit: true});
console.log(this.state.isEdit);
}
View
<div id={this.props.id} onClick={this.clicker} className="aui-item page-card off-track notecards">
<div className="project-details">
<div className="card-container">
<div className="left">
<h6>Title</h6>
<span>{this.props.note.content}</span>
<h6 className="compact">Last status report</h6>
<span>{this.props.note.updatedAt}</span>
</div>
<div className="right">
<span>something</span>
</div>
</div>
</div>
</div>

You can directly access props inside clicker
clicker(event){
console.log('clicking the clicker');
console.log(this.props.id);
this.setState({isEdit: true});
console.log(this.state.isEdit);
}

In this case it would be better to create separate component. In my opinion not necessary to create big huge views.
So, your component should be like this:
function Item({
id,
updatedAt,
content,
onClick,
}) {
// We should pass `id` variable to `onClick` handler.
return (
<div onClick={() => onClick(id)} className="aui-item page-card off-track notecards">
<div className="project-details">
<div className="card-container">
<div className="left">
<h6>Title</h6>
<span>{content}</span>
<h6 className="compact">Last status report</h6>
<span>{updatedAt}</span>
</div>
<div className="right">
<span>something</span>
</div>
</div>
</div>
</div>
);
}
Or, if you don't want to use separate component, you can access this.props variable from clicker event handler:
clicker(event){
// this.props are accesible here.
this.setState({isEdit: true});
}

React.js: project is not working

I am making a simple React.js project. The project can be found here.
The HTML is as follows:
<header>
<div class="container-center">
<h1 class="text-center">Markdown Previewer</h1>
</div>
</header>
<div class="container-center" id="main-container">
</div>
<footer>
<div class="container-center">
<p class="text-center">Copyright © Sergey Kosterin, 2016. All rights reserved.</p>
</div>
</footer>
The Javascript code is as follows:
var RawTextContainer = React.createClass({
render: function(){
return (
<h1>Raw Text</h1>
);
}
});
var MarkdownContainer = React.createClass({
render: function(){
return (
<h1>Markdown Text</h1>
);
}
});
var MainAppContainer = React.createClass({
render: function(){
return (
<div class="row">
<div class="col-md-6">
<RawTextContainer />
</div>
<div class="col-md-6">
<MarkdownContainer />
</div>
</div>
);
}
});
ReactDOM.render(<MainAppContainer />, document.getElementById('main-container'));
I want the app to show me two columns containing some text. But I don't see anything. What am I doing wrong?

React doesnt use class keyword. Instead of that it should be className. Here is a useful link about class & className keywords.
var MainAppContainer = React.createClass({
render: function(){
return (
<div className="row"> // className instead of class
<div className="col-md-6"> // className instead of class
<RawTextContainer />
</div>
<div className="col-md-6"> // className instead of class
<MarkdownContainer />
</div>
</div>
);
}
});
If it isn't the answer, then you have to provide a bit more information about your problem e.g. stack trace, errors etc. It's quite difficult to guess where is your problem.
Update
Worked example -> Pen Example i don't know why, but Pen doesnt recognise ReactDOM or you didn't include it. You can try to render your component through React.
React.render(<MainAppContainer/>, document...)
Also if you open browser console, you will get more information about some errors, or required statements (in your case jQuery isn't included file).
Thanks.