React: Unterminated JSX contents - javascript

Why do I get the error Unterminated JSX contents for the closing div-element? What am I doing wrong?
export default class Search extends Component {
render() {
return (
<div class="ui icon input">
<input type="text" placeholder="Search...">
<i class="circular search link icon"></i>
</div>
);
}
}

Issue is, you forgot to close your input element, in JSX you have to close all the opened tags properly like in XML.
As per DOC:
JSX is a XML-like syntax extension to ECMAScript without any defined
semantics. It's intended to be used by various preprocessors
(transpilers) to transform these tokens into standard ECMAScript.
One more thing, class is a reserved keyword, to apply any css class instead of using the class keyword, use className.
Try this:
export default class Search extends Component {
render() {
return (
<div className="ui icon input">
<input type="text" placeholder="Search..."/>
<i className="circular search link icon"></i>
</div>
);
}
}

Your input JSX element is not terminated, it is missing a closing tag.
And class is a reserved name in Javascript. You need to use the className prop instead.
<div className="ui icon input">
<input type="text" placeholder="Search..." />
<i className="circular search link icon"></i>
</div>

import React, { Component } from 'react';
class Counter extends Component {
render() {
return (
<div>
<h1>Hello World</h1>
<button>Increment</button>
</div>
);
}
}
export default Counter;

Related

onClick in button tag is not working in react component

hi i am a newbie in react i am facing a issue in classbased component
given below is my component which i am calling inside another component of react i just want to call the temp function when onClick gets fired but in my case it is not working please let me know where i am doing wrong?
import react from 'react'
import '../../../css/classBased/editor/textFieldForEditor.css'
import addTextField from './leftTrayIconsForEditor'
class TextField extends react.Component {
temp() {
console.log('hi there')
}
render(){
return (
<div className='textfield_parent_container'>
<div>
<center>
<div>
<button onClick={()=> {this.temp()}}>
<i className="material-icons md-18">article</i>
</button>
<button>
<i className="material-icons md-18">image</i>
</button>
<button>
<i className="material-icons md-18">movie</i>
</button>
</div>
</center>
</div>
<textarea className='text' id={`textfield${this.props.widgetNumber}`}></textarea>
<div className='utilitytrayouter'>
<center>
<div className='temp'>
<button>
<i className="material-icons md-18">article</i>
</button>
<button>
<i className="material-icons md-18">image</i>
</button>
<button>
<i className="material-icons md-18">movie</i>
</button>
</div>
</center>
</div>
</div>
)
}
}
export default TextField;
It actually works and clicking the first article button really calls console.log('hi there'). Proving the error message could be helpful.
But since you are using Class components most likely you are facing the Handling Events "problem" and what you need is to bind your temp method to TextField component. The easiest way (but may require a Babel plugin depending on your setup) is by using the arrow function:
temp = () => {console.log('hi there')}

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

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

Meteor/React: How to integrate react component in main template

This is how my search page looks like in my meteor application:
/client/main.html
<head>
<title>Search</title>
</head>
<body>
<div class="ui icon input">
<input type="text" placeholder="Search...">
<i class="circular search link icon"></i>
</div>
</body>
I'm completely new to react and I would like to use react for this simple search.
/imports/ui/search.jsx
import React, { Component } from 'react';
export default class Search extends Component {
render() {
return (
<div class="ui icon input">
<input type="text" placeholder="Search...">
<i class="circular search link icon"></i>
</div>
);
}
}
But how do I have to use it for react properly? How do I use that component in the main template? And how can I set this input field centered on the screen?
You'd better check the document and example first.
Here is an example to answer your question.
Html just contains the empty container element.
<script src="https://facebook.github.io/react/js/jsfiddle-integration.js"></script>
<div id="container">
<!-- This element's contents will be replaced with your component. -->
</div>
The App component is the main component. You could use something like Router.
class App extends React.Component {
render() {
return (
<div>
<Search />
</div>
);
}
}
Search component as you made. In above, you could see Search component is used such that way in React.
About style, you can pass style object to component directly or make a css file.
class Search extends React.Component {
render() {
return (
<div class="ui icon input" style={searchContainerStyle}>
<input type="text" style={searchInputStyle} placeholder="Search..." />
<i class="circular search link icon"></i>
</div>
);
}
}
const searchContainerStyle = {
width: '50%',
margin: '0 auto'
}
const searchInputStyle = {
width: '100%'
}
Finally, render App under container element.
React.render(<App />, document.getElementById('container'));

ReactJs dynamic html, binding values to the child class

I'm trying to create a plugin for an audio player where the user can specify their own optional html. The html that the user does specify should have certain properties that are defined in the player file.
At the moment in the plugin, the render method looks like this (cut for brevity example):
player.js:
render(){
return (
<div id="player">
<a class="jp-play" style={this.state.playStyle} onClick={this.play}>
<i class="fa fa-play"></i>
</a>
<div class="jp-current-time">{this.state.currentTime}</div>
</div>
);
Instead of hardcoding the JSX html in the plugin render (player.js) method I want to do something like this:
render(){
return (
{this.props.playerHtml}
);
where the parent calls this like so:
app.js:
render(
<Player playerHtml={getHtml()} />
, document.getElementById("app"));
function getHtml(){
<div id="player">
<a class="jp-play" style={this.state.playStyle} onClick={this.play}>
<i class="fa fa-play"></i>
</a>
<div class="jp-current-time">{this.state.currentTime}</div>
</div>
}
So the user can specify their own html for the plugin. This way instad of passing a fa-play icon within jp-play they can pass whatever they want.
The problem is that the onClick event handler and states passed through will no longer work properly as this.state.playStyle and this.state.currentTime will point to app.js file and not player.js.
My question is, how do I allow the user to supply their own html like this but bind the values of the html the user passes and the events to values and functions in my player.js? I could do this easily by modifying the dom but I don't think this is the react way.
You can pass the function to generate the player elements in a prop. The important thing is that it has to be binded to the Player component instance before being called.
Here there is a working version of your code. Take into account that you are returning a JSX element inside getHtml, not pure HTML, so be sure to change class for className and so on.
Important: I hope you understand the security implications of what you are trying to do.
class Player extends React.Component {
constructor(props) {
super();
this.state = {
playStyle: { background: 'red' },
currentTime: new Date()
}
}
render() {
return (
<div>
Player:
{ this.props.playerHtml.bind(this)() }
</div>
);
}
};
function getHtml() {
return (
<div id="player">
<a className="jp-play" style={this.state.playStyle} onClick={this.play}>
<i className="fa fa-play">Play</i>
</a>
<div className="jp-current-time">{this.state.currentTime.toString()}</div>
</div>
);
}
ReactDOM.render(
<Player playerHtml={getHtml} />
, document.getElementById("app")
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

Categories