I keep getting this syntax error, but have no idea where the end sequence is failing:
import React, { Component } from 'react';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<textarea rows="4" cols="50">
<h1>Look at this!</h1>
<h2>This is MAGIC!</h2>
<a href="https://www.mozilla.com/">
<p>Think about all this power of <code>React</code></p>
<textarea />
</div>
);
}
}
export default App;
The <a> element is not closed. I suggest you to add linters it will be easier for you to spot these errors, also it's strange why you editor didn't point that.
You have two unterminated JSX contents in your code. One for the first textarea and one for the a. Here is the fixed code. By the way, I agree with the linter suggestion.
class App extends React.Component {
render() {
return (
<div className="App">
<textarea rows="4" cols="50" />
<h1>Look at this!</h1>
<h2>This is MAGIC!</h2>
Go to Mozilla
<p>
Think about all this power of <code>React</code>
</p>
<textarea />
</div>
);
}
}
ReactDOM.render( <App />, document.getElementById( "root" ) );
<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="root"></div>
html <a> tag needs to be closed using </a> if there is any content like text, div, etc.
Go to Mozilla
Related
index.js
import React, {Component} from 'react';
import ReactDOM from 'react-dom';
const comment1 = {
"text":"Nice job",
"author_name":"Aru",
"avatarUrl": 'http://www.gravatar.com/avatar/3b3be63a4c2a439b013787725dfce802?d=identicon'
}
function CompleteComment(props){
const comment = props;
return (
<div className="UserInfo">
<img className="Avatar"
src={comment.avatarUrl}
alt={comment.author_name}
/>
<div className="UserInfo-name">
{comment.author_name}
</div>
<div className="comment">
Comment: {comment.text}
</div>
</div>
);
}
function App(){
return (
<div>
<!-- working,but only comment text is passed not all props -->
<CompleteComment text={comment1.text} />
<!-- Not Working -->
<CompleteComment comment={comment1} /> </div>
)
}
ReactDOM.render(
<App />,
document.getElementById('root')
);
In the above code, i am trying to pass the entire comment1 JSON object to the react component as a single prop, instead of individual props. how do I do it? I am not getting the values, also please explain why I don't get any errors also.
You need to change the way you use the "comment" prop.
Change this
const comment = props;
to
const { comment } = props
Then this will work
<CompleteComment comment={comment1} />
Try this. This will work. You need to access comment of the props object.
function CompleteComment({ comment }){
return (
<div className="UserInfo">
<img className="Avatar"
src={comment.avatarUrl}
alt={comment.author_name}
/>
<div className="UserInfo-name">
{comment.author_name}
</div>
<div className="comment">
Comment: {comment.text}
</div>
</div>
);
}
Use spread operator:
<CompleteComment {...comment1} />
I am unable to load images despite of correct src given can anyone tell silly mistake in it!
I am absolute noobie so what is thing I am doing wrong ? in react img tag <img src={} /> this how i think codes are written in it!
Template.js Code
import React from 'react';
import './Template.css';
function Template () {
return (
<div>
<div className="shape header-shape-one">
<img src={"./shape1.jepg"} alt="shape"></img>
</div>
<div className="shape header-shape-tow animation-one">
<img src={"./shape2.png"} alt="shape"></img>
</div>
<div className="shape header-shape-three animation-one">
<img src={"./shape1.jepg"} alt="shape"></img>
</div>
<div className="shape header-shape-fore">
<img src={"./shape4.png"} alt="shape"></img>
</div>
</div>
);
}
export default Template;
App.js Code
import React from 'react';
import NAVBAR from './components/Navbar/navbar';
import Template from './components/shape/Template'
class App extends React.Component
{
render()
{
return (
<div>
<Template />
<NAVBAR />
</div>
);
}
}
export default App;
Create a folder inside the public folder called images and move all your images there. Then, when referencing the path for your images do it like this: <img src="./images/shape1.jpg" alt="shape" />
How much static HTML should I serve with React as opposed to just leaving it in the HTML file?
(I am just getting started with React.)
I have a single page application, which, greatly simplified, looks like this:
<body>
<div id="container">
<div id="header">
<div id="header_dynamic_content">
</div>
</div>
<div id="dynamic_content">
</div>
<div id="footer">
</div>
</div>
</body>
Is it best/common practice to use React to only handle the dynamic content and to leave everything that is static in the HTML file? Or should I use React Components to serve everything?
So this?
class DynamicOne extends React.Component {
render() {
return (
/* My Content */
);
}
}
class DynamicTwo extends React.Component {
render() {
return (
/* My Content */
);
}
}
ReactDOM.render(<DynamicOne />, document.getElementById('header_dynamic_content'));
ReactDOM.render(<DynamicTwo />, document.getElementById('dynamic_content'));
or this?
class DynamicOne extends React.Component {
render() {
return (
/* My Content */
);
}
}
class DynamicTwo extends React.Component {
render() {
return (
/* My Content */
);
}
}
class App extends React.Component {
render() {
return (
<div>
<div id="header">
<div id="header_dynamic_content">
<DynamicOne />
</div>
</div>
<div id="dynamic_content">
<DynamicTwo />
</div>
<div id="footer">
</div>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('container'));
According to React Documentation:
Applications built with just React usually have a single root DOM node. If you are integrating React into an existing app, you may have as many isolated root DOM nodes as you like.
Ref
Happy coding :)
I'm starting to learn react and getting a problem when calling multiple ReactDOM.render functions:
react:
class Header extends React.Component{
render(){
return(
<div>
<p>Test1</p>
</div>
)
}
};
class Main extends React.Component {
render(){
return(
<section>
<p>Test2</p>
</section>
)
}
};
ReactDOM.render(<Main />, document.getElementById('root2'));
ReactDOM.render(<Header />, document.getElementById('root'));
html part:
<body>
<div id="root"></div>
<div id="root2"></div>
</body>
I'm getting the error:
Target container is not a DOM element.
When searching for this problem I got the information that it should be possible to call ReactDom.render multiple times. So I appreciate your help!
Edit: Just tried it with one html tag and changed the id. It seems to have a problem when the id is not "root"...
You are right, you should be able to call render multiple times in your code.
But instead of doing that why don't you do this:
Class App extends Component {
render(){
<React.Fragment>
<Header />
<Main />
</React.Fragment>
}
}
ReactDOM.render(<App />, document.getElementById('root'))
This is easier, correct and performance superior.
I really see no reason as to why soomeone woudld need to put 2 different renderers on one page. Its just putting more strain on the browser for no reason and it will slow down your application.
How can I update my state value inside child component in this property {this.state.username} using of this function this.messageSubmit and how can I re-render the child render for displaying changed state values. Please help me anyone how can I update my state value inside and chat box because I'm new to reactjs
This is my child component chatting.js
import React from "react";
export class Chatting extends React.Component{
constructor(props){
super(props);
this.state={
username: 'shiva'
}
this.messageSubmit=this.messageSubmit.bind(this);
this.messageTextBox=this.messageTextBox.bind(this);
}
messageTextBox(event){
this.setState=({
username :event.target.value
})
}
messageSubmit(){
console.log(this.setState.username);
}
render(){
return(
<div>
<div className="chat-decription">
<div className="rt">
<div className="talk-bubble tri-right btm-right">
<div className="talktext">
<p>Flush to the bottom right. Uses .btm-right only.</p>
</div>
</div>
</div>
<div className="fl">
<div className="talk-bubble tri-right btm-right">
<div className="talktext">
<p>Flush to the bottom right. Uses .btm-right only.</p>
</div>
</div>
</div>
<div className="rt">
<div className="talk-bubble tri-right btm-right">
<div className="talktext">
<p> {this.setState.username}</p>
</div>
</div>
</div>
<div className="fl">
<div className="talk-bubble tri-right btm-right">
<div className="talktext">
<p>Flush to the bottom right. Uses .btm-right only.</p>
</div>
</div>
</div>
</div>
<div className="chat-textfiled">
<input type="text" className="form-control text-form" onChange={this.messageTextBox}/>
<input type="button" value="submit" onClick={this.messageSubmit}/>
</div>
</div>
)
}
}
This is my parent class
import React from "react";
import {render} from "react-dom";
import {Default} from "./component/Default";
import {Chatting} from "./component/Chatting";
import {BrowserRouter as Router,Route,Link,Switch } from 'react-router-dom';
// import Background from '../images/person_img.png';
class App extends React.Component{
constructor(){
super();
}
render(){
return(
<Router>
<div className="container">
<div className="container-top">
<div className="col-lg-4 leftmenu-contact-bg">
<div className="searchbox">
<div className="textbox-bg">
<input type="text" className="form-control" placeholder="Search"/>
</div>
</div>
<div className="ex1">
<a href="/chattting">
<div className="left-list">
<div className="left-img"><i className="material-icons icon-color">person</i></div>
<div className="right-content">dgfg</div>
</div>
</a>
</div>
</div>
<div className="col-lg-8 row">
<Switch>
<Route exact path='/' component={Default} />
<Route exact path='/chattting' component={Chatting} />
</Switch>
</div>
</div>
</div>
</Router>
);
}
}
render(<App/>,document.getElementById('app'));
setState is a function.
You should write:
this.setState({
username: event.target.value
});
Also, instead of
console.log(this.setState.username);
You should write
console.log(this.state.username);
And, again, instead of:
<p>{this.setState.username}</p>
You should write
<p>{this.state.username}</p>
In addition to the syntax corrections by #Rahamin, couple of pointers to your code -
Calling setState in the render function directly shouldn't be used, as it'll go into an infinite recursive function call stack. You'll probably be thrown an error of Maximum update depth exceeded.
Also, using console.logdirectly in the function that sets the state won't give you the desired output as they are queued and updated. It's best to include such console.log statements in the render itself.
Lastly, please post questions with good formatted code :)