How I can one component to another component in react
Question
How I can add component CountryName and component CountryCapital to component Country ?
Display lists in browser:
Russia
Moscow
France
Paris
data.js
export default [{
id: 1,
name: 'France',
capital: 'Paris',
},
{
id: 2,
name: 'Russia',
capital: 'Moscow'
}];
First component CountryName.js
import React, { Component } from 'react'
class CountryName extends Component {
render() {
const {data} = this.props;
const CountryName = data.map(country => {
return (
<div>
<h2>{country.name}</h2>
</div>
)
})
return (
<div>
{CountryName}
</div>
);
}
}
export default CountryName;
Second component CountryCapital.js
import React, { Component } from 'react'
class CountryCapital extends Component {
render() {
const {data} = this.props;
const CountryCapital = data.map(country => {
return (
<div>
<p>{country.capital}</p>
</div>
)
})
return (
<div>
{CountryCapital}
</div>
);
}
}
export default MovieDescription;
Third component Country.js
import React, { Component } from 'react'
import CountryName from './CountryName';
import CountryCapital from './CountryCapital';
class Country extends Component {
render() {
const {data} = this.props;
const country = data.map(country => {
return (
<li key = {country.id}>
</li>
)
})
return (
<ul>
{Country}
</ul>
);
}
}
export default Country;
App.js
import React, {Component} from 'react';
import Country from './components/Country';
class App extends Component {
render() {
return (
<div>
<Country data={this.props.data}/>
</div>
)
}
}
export default App;
//HTML:
<body>
<div id="root"></div>
</body>`
2 answers
solution1
0 ACCPTED 2017-10-15 03:27:27
First of all your components are structured in a way that, it will first list down all country names one by one and then list down country capitals one by one.
Since your requirement is to display Country and its capital as a group (like listed together in each line), you don't need two components. And in your Country component, just call the newly written component to display it as a group.
Something like this will work. Combine CountryName and CountryCapital to a single component (CountryData) like below.
const {data} = this.props;
const CountryData = data.map(country => {
return (
<div>
<div><h2>{country.name}</h2></div>
<div><h2>{country.capital}</h2></div>
</div>
)
})
return (
<div>
{CountryData}
</div>
);
And in your Component Country, call this new component and pass props like:
import CountryData from './CountryData';
......
......
render() {
const {data} = this.props;
return (
<CountryData data={this.props.data} />
);
}
Hope that helps.
solution2
0
Error: JSX elements must be wrapped in an enclosing tag
return (
<div><h2>{country.name}</h2></div>
<div><h2>{country.capital}</h2></div>
^
)
})
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.