react object
import React, { Component } from 'react';
class App extends Component {
render () {
return (
<div>
<Button />
</div>
)
}
}
class Button extends Component {
render () {
return <button>A button</button>
}
}
export default App;import React, { Component } from 'react'
import './TourList.scss';
import Tour from '../Tour/Tour';
import { tourData } from './tourData';
export default class TourList extends Component {
state={
tours:tourData
}
render() {
const {tours}=this.state
return (
<section className="toulist">
{tours.map(tour=>{
return <Tour key={tour.id} tour={tour} />;
})}
</section>
)
}
}
//------------------------------------------------------
import React, { Component } from 'react';
import './Tour.scss';
export default class Tour extends Component {
state={
showinfo:false,
name:""
}
handleInfo=()=>{
this.setState({
showinfo:!this.state.showinfo,
name:"kumar"
})
}
render() {
const {id,city,name,info,img}=this.props.tour
return (
<div className="grid">
<article className="tour">
<div className="img-container">
<img
src={img}></img>
<span className="close-btn">
<i class="fa fa-window-close"></i>
</span>
</div>
<div className="info">
<div className="tour-info">
<h3>{name}</h3>
<h4>{city}</h4>
<h5>info{""}
<span class="fa fa-caret-square-down" onClick={this.handleInfo}></span></h5>
</div>
{this.state.showinfo && <p>{info}{this.state.name}</p>}
</div>
</article>
</div>
)
}
}
Also in JavaScript:
- responsive grid system angular
- ngmodel onchange
- warning Non-interactive elements should not be assigned mouse or keyboard event listeners jsx-a11y/no-noninteractive-element-interactions
- java.lang.IllegalArgumentException: Can only download HTTP/HTTPS
- js strings
- javascript date convert to unix
- javascript remove json element
- get date in javascript
- jest async test fetch api
- how many threads does node js use
- how to iterate through a js object
- iframe content zoom in and zoom out jquery
- Material-ui add circle icon
- span change jquery
- how to create json file in c#
- get element by id in javascript
- largest and smallest number in an array 1-100 javascript
- router-outlet' is not a known element angular
- get domain name javascript
- json file undefined
- unexpected template string expression no-template-curly-in-string react
- graphql file upload
- how to get the index of an array in javascript
- jquery get 2nd child