I've been working with React for the last days, so don't blame me.
But I'm trying to display my full name with a button but I get an error when I d this.
import React from 'react';
import logo from './logo.svg';
import './App.css';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
name: 'Val',
surname: 'Vree',
age: 17,
nationality: 'Netherlands'
};
}
render() {
return (
<div>
<Header header={this.state.name} />
<Content content={this.state.surname} />
</div>
);
}
}
class Content extends React.Component {
render() {
return (
<div>
<p>I'm {this.props.content}</p>
</div>
);
}
}
export default App;
How can I put multiple variables in the Content class? Sorry for everything, because I been learning it for some days and I don't have some knowledge of React.
you can pass it in a few ways:
<Content content={ `${this.state.name} ${this.state.surname}`} />
or
<Content name={this.state.name} content={this.state.surname} />
and get
class Content extends React.Component {
render() {
return (
<div>
<p>I'm {this.props.name} {this.props.content}</p>
</div>
);
}
}
just add multiple props. if your feeling lazy want just one prop just pass this.state and you can pass the entire object. but this is bad practice generally.
hope this helps
import React from 'react';
import logo from './logo.svg';
import './App.css';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
name: 'Val',
surname: 'Vree',
age: 17,
nationality: 'Netherlands'
};
}
render() {
return (
<div>
{/* <Header header={this.state.name} /> */}
<Content
name={this.state.name} //<---- add more props
surname={this.state.surname}
age={this.state.age}
nationality={this.state.nationality}
/>
</div>
);
}
}
class Content extends React.Component {
render() {
return (
<div>
<p>I'm {this.props.name} {this.props.surname}</p>
<p> I am {this.props.age} and i'm from {this.props.nationality}</p>
</div>
);
}
}
export default App;
When you say variables I think you mean props. You can pass props from a parent component to a child component like so
<ChildComponent propOne={this.state.stateOne} propTwo={this.state.stateTwo} />
Now ChildComponent has access to both of those props passed down from the parent component.
In ChildComponent you can access propOne by doing props.propOne (or this.props.propOne if ChildComponent is a class component).
In your case, you should do
import React from 'react';
import logo from './logo.svg';
import './App.css';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
name: 'Val',
surname: 'Vree',
age: 17,
nationality: 'Netherlands'
};
}
render() {
return (
<div>
<Header header={this.state.name} />
<Content name={this.state.name} surname={this.state.surname} />
</div>
);
}
}
class Content extends React.Component {
render() {
return (
<div>
<p>I'm {this.props.name} {this.props.surname}</p>
</div>
);
}
}
export default App;
Related
I have a functional component but I need in class component. So I tried to change this but had some error but I can't find what I'm missing.
import React, { useState } from 'react';
import DateTimeRangePicker from '#wojtekmaj/react-datetimerange-picker';
function App() {
const [value, onChange] = useState([new Date(), new Date()]);
return (
<div>
<DateTimeRangePicker
onChange={onChange}
value={value}
/>
</div>
);
}
export default App
I tried this but it's not working:
import React, { Component } from 'react'
import DateTimeRangePicker from '#wojtekmaj/react-datetimerange-picker';
export default class App extends Component {
constructor(props){
super()
this.state = {
value:new Date()
}
}
render() {
return (
<div>
<DateTimeRangePicker
onChange={() => this.setState({value:new Date()})}
value={this.state.value}
/>
</div>
)
}
}
As explained in npm page, onChange function returns a value. So you could change class component like this:
import React, { Component } from 'react'
import DateTimeRangePicker from '#wojtekmaj/react-datetimerange-picker';
export default class App extends Component {
constructor(props){
super(props)
this.state = {
value:[new Date(), new Date()],
}
}
render() {
return (
<div>
<DateTimeRangePicker
onChange={(value) => this.setState({value:value})}
value={this.state.value}
/>
</div>
)
}
}
I try to pass an array from one component to another, and from that one to another one, but my item is undefined.
App.js
From that file I try to pass this.state.searchResults to SearchResults component.
import React from 'react';
import './App.css';
import SearchBar from '../SearchBar/SearchBar';
import SearchResults from '../SearchResults/SearchResults';
import Playlist from '../Playlist/Playlist';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
searchResults: [
{name: 'name1', artist: 'artist1', album: 'album1', id: 1},
{name: 'name2', artist: 'artist2', album: 'album2', id: 2},
{name: 'name3', artist: 'artist3', album: 'album3', id: 3}
]
};
}
render() {
return (
<div>
<h1>Ja<span className="highlight">mmm</span>ing</h1>
<div className="App">
<SearchBar />
<div className="App-playlist">
<SearchResults searchResults={this.state.searchResults} />
<Playlist />
</div>
</div>
</div>
);
}
}
export default App;
SearchResults.js
Here I try to pass received this.props.searchResults to TrackList component
import React from 'react';
import './SearchResults.css';
import TrackList from '../Tracklist/Tracklist';
class SearchResults extends React.Component {
render() {
console.log(this.props.searchResults + ' SearchResults');
return(
<div className="SearchResults">
<h2>Results</h2>
<TrackList tracks={this.props.searchResults} />
</div>
);
}
}
export default SearchResults;
TrackList.js
import React from 'react';
import './Tracklist.css';
import Track from '../Track/Track';
class Tracklist extends React.Component {
constructor(props){
super(props);
console.log(props);
}
render() {
return(
<div className="TrackList">
{this.props.track.map(track => <Track track={track} key={track.id} />)}
</div>
);
}
}
export default Tracklist;
However, if I use map method on this.props.tracks, it says that this method cannot be used on undefined. What is wrong?
Try to replace with the below code in TrackList.js
<div className="TrackList">
{this.props.track.map(track => <Track track={track} key={track.id} />)}
</div>
Hope this helps
The problem is here
{this.props.track.map(track => <Track track={track} key={track.id} />)}
it should be tracks not track
{this.props.tracks.map(track => <Track track={track} key={track.id} />)}
Also if you want to share data between components in React direct with follow top-down way via props you can use React Context
Let, we have a parent component like this,
import React from 'react';
export default class ParentComp extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div className='padding'>
{this.props.children}
</div>
);
}
}
Okay, now i want to use this component like this
<ParentComp fillbg="#389457">
content goes here.......
</ParentComp>
What needs to be changed in parent component to apply that background (fillbg)
import React from 'react'
export default const ParentComp = ({children, fillbg}) => (
<div className='padding' style={{backgroundColor: fillbg}}>
{children}
</div>
);
Pass it as prop to your component and use it
import React from 'react';
export default class ParentComp extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div className='padding' style={{backgroundColor: this.props.fillbg}}>
{this.props.children}
</div>
);
}
}
Pass the fillbg prop like this
<ParentComp fillbg="#389457">
content goes here.......
</ParentComp>
I have two component in the same work space in reactjs but just one is displaying
import React, { Component } from 'react';
import logo, { ReactComponent } from './logo.svg';
import './App.css';
import ReactDOM from "react-dom";
class App extends React.Component {
render() {
let helloWorld = 'Welcome to good programming React';
return (
<div className="App">
<h2> {helloWorld}</h2>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('root'));
class Form extends React.Component {
constructor(props) {
super(props)
this.state = { username: '' }
this.handleChange = this.handleChange.bind(this)
this.handleSubmit = this.handleSubmit.bind(this)
}
handleChange(event) {
this.setState({ value: event.target.value })
}
handleSubmit(event) {
alert(this.state.username)
event.preventDefault()
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<input type="text" value={this.state.username} onChange={this.handleChange} />
<input type="submit" value="Submit" />
</form>
)
}
}
export default (App,Form)
output from browser gives just the form.how can i do to display both App and form
The problem here is that you are mounting the node <App/> but it does not contain your <Form/> component.
You just need to call <Form/> inside your <App/> component like this
class App extends React.Component {
render() {
let helloWorld = 'Welcome to good programming React';
return (
<div className="App">
<h2> {helloWorld}</h2>
<Form/>
</div>
);
}
}
Call <Form /> inside App component and then export your App component
export default App;
You might not be understanding how React works, and you might be confused with this code
ReactDOM.render(<App />, document.getElementById('root'));
What this code essentially does is renders the App Component into the element in the index.html with the id root. The reason why your second component is not rendering is because it is not experiencing a ReactDOM.render nor is it included in the App Component.
By convention, App component should be the only component experiencing ReactDOM.render, and all the other component to be rendered must be inside the App component. Just like what #sudo97 is saying
ReactDOM.render function needs to have the Root component or the parent component which is to be passed as a first parameter.
ReactDOM.render(<App />, document.getElementById('root'));
Here App is the root component, you can include <Form /> inside of the App component to render both the components.
You are not rendering the <Form /> component. Heres the simplest solution code to solve your issue:
import React from "react";
import ReactDOM from "react-dom";
import "./App.css";
class Form extends React.Component {
constructor(props) {
super(props);
this.state = { username: "" };
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({ value: event.target.value });
}
handleSubmit(event) {
alert(this.state.username);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<input
type="text"
value={this.state.username}
onChange={this.handleChange}
/>
<input type="submit" value="Submit" />
</form>
);
}
}
class App extends React.Component {
render() {
let helloWorld = "Welcome to good programming React";
return (
<div className="App">
<h2> {helloWorld}</h2>
<Form />
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));
export default App;
I'm trying to figure out how to make components communicate with each other in React. I have a large component App. In it I have 2 components: ParentComponentOne and ParentComponentTwo. In ParentComponentOne I have a component called ChildParentOne. How can i render the ParentComponentTwo only when clicking on ChildParent One
App.jsx
import React, { Component } from 'react';
import ParentComponentOne from 'ParentComponentOne';
import ParentComponentTwo from 'ParentComponentTwo';
import './App.css';
class App extends Component {
state = {
show:{
componentTwo: false
}
};
render() {
return (
<div>
<ParentComponentOne />
{this.state.show.componentTwo? <ParentComponentTwo /> : null}
</div>
);
}
}
export default App;
ParentComponentOne.jsx
import React, { Component } from 'react';
import ChildParentOne from 'ChildParentOne';
class ParentComponentOne extends Component {
render() {
return (
<div>
<ChildParentOne />
<div>some content</div>
<ChildParentOne />
</div>
);
}
}
export default ParentComponentOne ;
ChildParentOne.jsx
import React, { Component } from 'react';
class ChildParentOne extends Component {
render() {
return (
<div onClick={}>
BTN
</div>
);
}
}
export default ChildParentOne ;
Pass a callback into ParentComponentOne which would change show.componentTwo state when child of it is clicked:
class App extends Component {
state = {
show: {
componentTwo: false
}
};
childClicked() {
this.setState({
show: {
componentTwo: true
}
})
}
render() {
return (
<div>
<ParentComponentOne childClicked={this.childClicked} />
{this.state.show.componentTwo? <ParentComponentTwo /> : null}
</div>
);
}
}
ParentComponentOne:
class ParentComponentOne extends Component {
render() {
return (
<div>
<ChildParentOne onBtnClick={this.props.childClicked} />
<div>some content</div>
<ChildParentOne onBtnClick={this.props.childClicked} />
</div>
);
}
}
Now, just pass this callback into ChildParentOne similarly and use it as a prop:
class ChildParentOne extends Component {
render() {
return (
<div onClick={this.props.onBtnClick}>
BTN
</div>
);
}
}