Edit the snippet below so that two properties – title and author – are passed down into the App component as props. The values that are passed down can be of your choosing.
import React from "react"
import ReactDOM from "react-dom"
ReactDOM.render(
<App title={"React"} author={"Mr. X"}/>,
document.getElementById('root')
);Edit the snippet below so that the passed-in properties from the previous question – title and author – are rendered in the App component's UI.
import React, { Component } from "react"
class App extends Component {
render () {
return (
<div>
<h1>Welcome to {this.props.title}</h1>
<footer>This site is designed by {this.props.author}</footer>
</div>
)
}
}
export default AppAssume we have defined a component named Post that is located in /js/components/Post.js. Edit the below code snippet to import the Post component and render it as a child within the Main UI. Main is located in /js/components/Main.js.
import React, { Component } from "react"
import Comments from "../Comments"
import Post from './Post.js'
class Main extends Component {
render () {
return (
<div>
<Post />
<Comments />
</div>
)
}
}
export default MainProducts receives a prop called listings, which contains an array of objects. Each object in listings contains a key for name (string) and price (number). Edit the below code snippet to render a list of Comment components that take name and price as props.
import React, { Component } from "react"
import Products from "../Products"
import Comment from "../Comment"
class Products extends Component {
let eachList = this.props.listings.map((list,i)=>{
return(<p>{list["name"]}: ${list["price"]}<p>)
})
render () {
return (
<div>
<p>{eachList}</p>
<div/>
)
}
}
export default ProductsIn the code snippet below we want text entered into the input field to be displayed inside the <p>. Do the following things...
- Define a property
messagein thestateof theAppcomponent - Make it so that whenever the form's input is modified,
messageinstateis updated accordingly
Hint:
onChange
import React, { Component } from "react"
class App extends Component {
constructor(){
super()
this.state(){
message:""
}
}
// onSubmitQuery(e){
// e.preventDefault()
// this.setState{
// message:
// }
// }
render() {
return (
<div>
<form onChange={this.state.message)}>
<label>Input: </label>
<input type="text" />
</form>
<p>Message: { this.state.message }</p>
</div>
);
}
}
export default AppYou are in your terminal, inside of an existing React application. Enter the command(s) needed to add React Router to the current app.
npm i -S react-router-dom
Edit the following code snippet. Add the <Router> provider component, and rewrite the rest of this snippet to incorporate <Link/>s and matching <Route/>s. Each <Route/> will render a component at a path matching its <Link/>'s to prop (without spaces).
// Assume all necessary components are imported above
class App extends Component {
render () {
return (
<Router>
<div>
<h1>Welcome to My shopping site</h1>
<nav>
<Link to="/">Home</Link>
<Link to="/products">Products</Link>
<Link to="/cart">Shopping Cart</Link>
</nav>
<main/>
<Route path="/" component={App}/>
<Route path="/products" component={Products}/>
<Route path="/cart " component={ShoppingCart}/>
<main/>
<footer>This site is designed by us</footer>
</div>
</Router>
)
}
}
export default AppEdit the code snippet below so that once the App component has loaded, a GET request is made to 'http://api.example.com/info'. Display the results of that request in the provided <div>.
You can use the API tool of your choice to answer this question.
// Assume all necessary components are imported above
class App extends Component {
// Assume the constructor is complete
getData(){
axios.get('http://api.example.com/info')
.then((response) => {
this.setState({
responseArray: Object.values(response)
})
})
}
let results = this.state.responseArray.map((each,i)=>{
return(<p>{responseArray[i]}<p>)
})
render () {
return (
<div>
<h1>Results</h1>
<div>{ this.state.results }</div>
</div>
)
}
}
export default App
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent