I want to ask if this possible in react while passing props or something similar. Eslint underlined the whole process in red.
Component A,
enter code here
<div>
<button style={{style:props.submit}}> Submit</button>
<button style={{style:props.loading}}> Loading</button>
</div>
Component B
import ComponentA from 'A',
export default class ComponentB extends Component {
constructor(props) {
super();
this.state = {
load:false,
}
handleSubmit = (e) => {
e.preventDefault();
this.setState({
load:true,
})
}
render () {
return (
<ComponentA {this.state.load ? (props.loading): (props.submit)}/>
)
}
You can use like that:
const newProps = this.state.load ? {loading: props.loading} : {submit: props.submit}
<ComponentA {...newProps} />
Related
Would it be possible to access a sub-components properties in the main component in React?
For example I'm trying this: I've got a main component MyComponent and a SubComp sub-component that renders a button. Would it be possible to set the state of MyComponent equal to the tex property of the clicked SubComp?
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
name: 'Initial State'
};
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState({name: SubComp.tex});
}
render() {
return (
<div>
<SubComp onClick={this.handleClick} tex="but1"/>
<SubComp onClick={this.handleClick} tex="but2"/>
<h1>{this.state.name}</h1>
</div>
);
}
};
class SubComp extends React.Component {
constructor(props){
super(props);
};
render(){
return(
<button onClick={this.props.onClick}>Click Me</button>
);
}
}
I've tried to do it in the handleClick method with SubComp.tex but it's obviously not working.
Thanks!
Pass the tex prop in SubComp via the callback:
render() {
return (
<button onClick={() => this.props.onClick(this.props.tex)}>Click Me</button>
);
}
And use it in the handleClick of MyComponent:
handleClick(tex) {
this.setState({name: tex});
}
Yes, this is definitely possible. Your idea of passing the function from the main component was right, but to achieve what you are trying to do, you could pass a parameter to the function, like this:
handleClick(e) {
this.setState({name: e.target.value});
}
Notice that I have added the e as a parameter to your handleClick function. This is the click event received from clicking the button. We then set the state equal to the value from this event.
You can also convert SubComp to functional component and pass it handleClick which you defined inside MyComponent as props:
const SubComp = ({handleClick}) => {
return <button onClick={handleClick}>Click me</button>
}
Then pass it handleClick method like so: <SubComp handleClick={this.handleClick} />
The below is App.js file
import React,{Component} from 'react'
//import logo from './logo.svg';
import './App.css'
import InputComponent from "./components/InputComponent";
import ResultComponent from "./components/ResultComponent";
class App extends Component {
render()
{
return (
<div className="App">
<InputComponent />
<ResultComponent/>
</div>
);
}
}
export default App;
The below is InputComponent
import React,{Component} from "react";
import axios from 'axios';
class InputComponent extends Component{
constructor(props) {
super(props)
this.state = {
owner : "",
repo : "",
}
}
//here event.target.value is setting value of target to this owner
ownerName = (event) => {
this.setState({
owner:event.target.value
})
}
//here event.target.value is setting value of target to this repo
repoName = (event) => {
this.setState({
repo:event.target.value
})
}
render(){
//let submit = this.props;
let {items} = this.state;
return(
<div>
<p>The current Owner is {this.state.owner} and the current Repo is {this.state.repo}</p>
<input type='text' onChange={this.ownerName} value={this.state.owner} placeholder='Enter Username' className='inputFields'/>
<br/>
<input type='text' onChange={this.repoName} value={this.state.repo} placeholder='enter Repository' className='inputFields'/>
<br/>
</div>
);
}
}
export default InputComponent;
The below is Result Component
import React,{Component} from "react"
import axios from "axios";
class ResultComponent extends Component{
constructor() {
super()
this.state = {
items: []
}
this.apiFetch=this.apiFetch.bind(this)
}
apiFetch = () => {
axios.get(`https://api.github.com/repos/${this.props.owner}/${this.props.repo}/issues`)
.then(response => {
console.log(response)
this.setState({
items:response.data,
})
})
.catch(error => {
console.log(error)
})
}
render(){
let {items} = this.state;
return(
<div className='submit'>
<button onClick={this.apiFetch}>Fetch Results</button>
<ul>
{items.map(item=>(
<li key={item.id}>
Issue-title: {item.title}
</li>
)
)}
</ul>
</div>
);
}
}
export default ResultComponent
I want to access the value of owner,repo from InputComponent in ResultComponent in my URL part
'''axios.get(https://api.github.com/repos/${this.props.owner}/${this.props.repo}/issues)'''
but not able to do so, can anyone help me what i am doing wrong. I am not able to figure out the issue I am new to React.
In general, there are the options for passing data between react components :
From Parent to Child using Props
From Child to Parent using Callbacks
Between Siblings :
(i) Combine above two methods
(ii) Using Redux
(iii) Using React’s Context API
Use design pattern like HOC or render Props for sharing code between React components (render code abstrait => good practice for reusable)
In your case, it's good pratice with the design pattern render Props. For example, I propose an example of codes :
class InputComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
owner : "",
repo : "",
}
}
//here event.target.value is setting value of target to this owner
ownerName = (event) => {
this.setState({
owner:event.target.value
})
}
//here event.target.value is setting value of target to this repo
repoName = (event) => {
this.setState({
repo:event.target.value
})
}
render() {
return (
<input type='text' onChange={this.ownerName} value={this.state.owner} placeholder='Enter Username' className='inputFields'/>
{/*
use the `render` prop to dynamically determine what to render.
*/}
{this.props.render(this.state)}
</div>
);
}
}
class WithInputComponent extends React.Component {
render() {
return (
<div>
<InputComponent render={dataInput => (
<ResultComponent dataInput={dataInput} />
)}/>
</div>
);
}
}
Here the links in more details :
https://en.reactjs.org/docs/render-props.html
https://towardsdatascience.com/passing-data-between-react-components-parent-children-siblings-a64f89e24ecf
There are three answers to this question:
You should set your state as high on the DOM tree as you can so that
you can pass the values down to siblings. In simple terms, if state
is set by the parent of the two, you can just ask for state from the
parent and you're done.
You can use a state management system like Redux, which effectively
does the same thing behind the scenes.
You can use refs, but you probably shouldn't so ignore that.
If I were you, I would just bring my state up to App.js, modify it from InputComponent, and pass that modified state down to ResultComponent.
class App extends Component {
constructor(props){
super(props)
this.state = {//initial values}
}
changeSomething() {
// function that changes your state's values
}
render()
{
return (
<div className="App">
<InputComponent aFunctionProp={changeSomething} />
<ResultComponent inputVals={this.state}/>
</div>
);
}
}
export default App;
Check this out as well:
https://reactjs.org/tutorial/tutorial.html
Remember that when you pass down props through your component, you refer to them by their prop name, not by the value you pass in. So in InputComponent, you'll be looking for aFunctionProp() rather than changeSomething(). That was pretty confusing to me when I first learned React.
I am seeing strange behavior that I don't understand in the following code
export class PlayerListPage extends React.Component<PlayerListPageProps, {toggle: boolean}> {
constructor(props: PlayerListPageProps) {
super(props);
this.state = {
toggle: false
};
}
handleToggle = () => {
this.setState({
toggle: !this.state.toggle
})
}
render() {
return (
<div>
<TextField
key={1}
label={'label'}
value={'value'}
/>
<Button
onClick={this.handleToggle}
>
Click
</Button>
</div>
)
}
}
Every time this toggle method is triggered, and updates the component's state, the TextField component is unmounted/remounted instead of just re-rendering.
I would expect TextField to re-render without unmounting first. Could somebody kindly point out what I am doing wrong?
Some additional context: here is the parent component (which is the root of the app):
#observer
export class RootView extends React.PureComponent {
private rootStore: RootStore = new RootStore();
private appTheme : any = createMuiTheme(DarkTheme);
#observable private player: Player
async componentDidMount() {
await this.rootStore.playerStore.retrievePlayerBios();
this.player = this.rootStore.playerStore.getPlayer('12');
}
render() {
console.log(this.appTheme);
return (
<main>
<MuiThemeProvider theme={this.appTheme}>
<Provider rootStore={this.rootStore}>
{/* {!!this.player && <PlayerStatsView player={this.player}/>} */}
<PlayerListPage/>
</Provider>
</MuiThemeProvider>
</main>
)
}
}
So I have a component "itemSelection" and inside of it I map through an api response like this
<div className="row">
{this.state.items.map(i => <Item name={i.name} quantity={i.quantity} />)}
</div>
Here the state of "Item" component
constructor(props){
super(props);
this.state = {
visible: false,
selected: false,
}
}
How could I pass the state of "Item" component to "itemSelection" component?
Sending data back up to your parent component should be done by using props.
Fairly common question, see this post for the long answer.
As according to me, If I understood your question you want to call the state of the child component to the parent component.
//Child.js
import s from './Child.css';
class Child extends Component {
getAlert() {
alert('clicked');
}
render() {
return (
<h1 ref="hello">Hello</h1>
);
}
}
export default withStyles(s)(Child);
//Parent.js
class Parent extends Component {
render() {
onClick() {
this.refs.child.getAlert()
}
return (
<div>
<Child ref="child" />
<button onClick={this.onClick.bind(this)}>Click</button>
</div>
);
}
}
Also, you can get the code reference from the link: https://github.com/kriasoft/react-starter-kit/issues/909
This a little tricky but Maybe, its help you solving your problem.
//Parent.js
class Parent extends Component {
component(props) {
super(props)
this.state = {
test: 'abc'
}
}
ParentFunction = (value) => {
this.state.test = value;
this.setState(this.state);
}
render() {
return (
<div>
<Child
test={this.state.test}
ParentFunction={this.ParentFunction}
/>
</div>
);
}
}
//Child.js
import s from './Child.css';
class Child extends Component {
component(props) {
super(props)
this.state = {
test: props.test
}
}
handleChange = () => {
this.state.test = event.target.value;
this.setState(this.state);
this.handleOnSave()
}
handleOnSave = () => {
this.props.ParentFunction(this.state.test);
}
render() {
return (
<div>
<input type="text" onChange={this.handleChange} />
</div>
);
}
}
export default withStyles(s)(Child);
Let say I have two components called A and B.
B has a status which keeps changing and I would like to pass the status to A so that I can trigger event when certain condition is met.
How do I keep monitoring/getting state of child from another component in React?
Thanks!
When component on the same level:
class Parent extends React.Component {
constructor() {
super();
this.state = {
status: "B not clicked"
}
this.componentBchangeHandler = this.componentBchangeHandler.bind(this);
}
componentBchangeHandler(value) {
this.setState({ status: value })
}
render() {
return (
<div>
<ComponentA status={this.state.status} />
<ComponentB componentBchangeHandler={this.componentBchangeHandler} />
</div>
)
}
}
const ComponentA = (props) => <div>{props.status}</div>;
const ComponentB = (props) => <div onClick={() => props.componentBchangeHandler("some val")}>click me</div>;
https://codesandbox.io/s/k29mn21pov
And check out the documents I mentioned earlier.
If you're talking about a parent-child relationship, all you'd have to do is define a function that changes state on A and pass it as prop to B, like so:
class A extends Component {
constructor(props) {
super(props);
this.state = {
changed: false,
}
}
_statusChange = () => this.setState({ changed: !this.state.changed });
render() {
return(
<div>
<span>State on A: { this.state.changed.toString() }</span>
<B changeHandler={this._statusChange} />
</div>
)
}
}
class B extends Component {
render() {
return(
<div>
<button onClick={this.props.changeHandler}>Click me</button>
</div>
)
}
}
const App = () => (
<A />
);
If they should be on the same level, by convention, you should define a third component, wrap A and B in it, again passing state as props between them.