We Keep Coding

How do I pass a React prop from Parent to Child, to another Child?

I currently have my Parent set up as follows, which I'm then passing props to
class WorkoutPlan extends React.Component {
constructor() {
super();
this.state = {
workoutPlan: {}
};
}
componentDidMount() {
axios
.get("/api/workout-plan")
.then(response => {
this.setState({ workoutPlan: response.data });
})
.catch(error => {
console.log(error);
});
}
render() {
const { workoutPlan } = this.state;
// const workoutPlan = this.state.workoutPlan;
return (
<div>
<h1>{workoutPlan.Name}</h1>
<button className="button" onClick={this.handleClick}>
Click Me
</button>
<Workout {...workoutPlan.workout} />
</div>
);
}
}
Then in my child, I'm wanting to pass those same props to another Child
import React from "react";
import Exercise from "./Exercise";
const Workout = props => {
return (
<div>
<h2>"Workout for {props.day}"</h2>
<Exercise {...workoutPlan.workout} />
</div>
);
};
export default Workout;
I can't seem to figure out how I would go about doing this. I'm being told that the setup is exactly the same as the 1st child, but when I enter in the same code, it's not working.

You can pass {...props} to your Exercise component so your Workout component should look like this
import React from "react";
import Exercise from "./Exercise";
const Workout = props => {
return (
<div>
<h2>"Workout for {props.day}"</h2>
<Exercise {...props} />
</div>
);
};
export default Workout;

When you pass props destructuring it, the effect it's the same as you were passing props one by one.
You can't achieve your goal because in your Workout component there is no "workout" prop.
Try to pass props to Exercise component like this:
<Exercise {...props} />

How to create ref in class based component and pass it to the functional component in react?

So i have this class based component:
import React, { Component } from 'react'
import './OptionsMenu.sass'
import DropdownBox from '../DropdownBox/DropdownBox'
import Icon from '../Icon/Icon'
class OptionsMenu extends Component {
constructor(){
super()
this.dropdownBoxRef = React.createRef()
}
handleClickOutside = event => {
if (this.dropdownBoxRef && !this.dropdownBoxRef.current.contains(event.target)) {
this.props.close()
}
}
componentDidMount() {
document.addEventListener('mousedown', this.handleClickOutside)
}
componentWillUnmount() {
document.removeEventListener('mousedown', this.handleClickOutside)
}
render() {
const options = this.props.options.map(option => (
<li className='OptionsList-Element'>
<div className='OptionsList-ElementIcon'>
<Icon name={option.icon} />
</div>
<span>{option.label}</span>
</li>
))
return (
<DropdownBox reference={this.dropdownBoxRef} styles={this.props.styles}>
<ul className='OptionsList'>{options}</ul>
</DropdownBox>
)
}
}
export default OptionsMenu
In constructor i'm creating ref, and then i want to pass it to DropdownBox component, that is rendered. In DropdownBox component i tried to use react hooks, but i think that i'ts wrong way. How to make it correctly?
Note, i dont want to switch my functional component to classbased!
Here is the code of DropdownBox component:
const dropdownBox = props => {
const dropdownBoxRef = useRef(props.reference)
return (
<div ref={dropdownBoxRef} className='DropdownBox-Container' style={props.styles}>
<div className='DropdownBox'>
<div className='DropdownBox-Triangle' />
{props.children}
</div>
</div>
)
}

You can use forwarding refs to get a ref to the underlying element outside the child component. For example:
const DropdownBox = React.forwardRef((props, ref) => (
<div ref={ref} className='DropdownBox-Container' style={props.styles}>
<div className='DropdownBox'>
<div className='DropdownBox-Triangle' />
{props.children}
</div>
</div>
));
Then in OptionsMenu:
return (
<DropdownBox ref={this.dropdownBoxRef} styles={this.props.styles}>
<ul className='OptionsList'>{options}</ul>
</DropdownBox>
)

Just assign the reference prop in your DropdownBox component to the ref prop of the div you want the reference of.
const dropdownBox = props => {
return (
<div ref={props.reference} className='DropdownBox-Container' style={props.styles}>
{ /* ... */ }
</div>
)
}
React will assign the component to the dropdownRef variable on its own.

You can give a the dropdownBox a function that will set the ref. To do this you can add in your menu component a function like the following:
const onDropdownRef = (ref) => {
this.dropdownBoxRef.current = ref;
}
Then you give this function to your dropdown component like so: <DropdownBox onRef={this.onDropdownRef} styles={this.props.styles}>
Then finally in your dropdown component you give this function to the div like so:
<div ref={props.onRef} className='DropdownBox-Container' style={props.styles}>
This will make sure your menu will have a ref to the top div from the dropdownbox.

How do I pass this.data through to other components with React and Axios

I am running a client and server setup (react and axios api calls) And I would like to understand how to access the returned data from my child components within the React Framework. I have the connection working to the http server, however i lack the foundational knowledge of working with this.state or props.
here is effectively my app.js
import React, { Component } from 'react';
import axios from 'axios';
import ChildComponent from "./components/childComponent"
class App extends Component {
state = {
data: [],
intervalIsSet : false
};
componentDidMount() {
this.getDataFromDb();
if (!this.state.intervalIsSet) {
let interval = setInterval(this.getDataFromDb, 10000);
this.setState({ intervalIsSet: interval });
}
}
getDataFromDb = () => {
fetch("http://localhost:3001/api/getData")
.then(data => data.json())
.then(res => this.setState({ data: res.data }));
};
render() {
const { data } = this.state;
return (
<div>
<childComponent />
</div>
);
};
}
export default App;
and here is the child component. --> my intention is to simply access (or print out) my returned data from the server from within the child component.
import React, { Component } from 'react';
class ChildComponent extends React.Component {
render() {
return (
{this.props.data}
);
}
}
export default ChildComponent;

First make sure you uppercase the first letter of ChildComponent. If you want to pass data you should add that object as an attribute to the component, and then access it throught this.props. Also you need to render a single top element, and if you don't need div or any other html element, you can wrap it with React.Fragment.
Regarding to data, if its an array you can simply map through it and return data you want to see, if you want the entire object to show as a string, you can use JSON.stringify(). And if that's an object you can show only data you want.
class App extends React.Component {
//...
render() {
const { data } = this.state;
return (
<div>
<ChildComponent data={data} />
</div>
);
}
}
//for array, ex: data = ["first","name"];
class ChildComponent extends React.Component {
render() {
return (
<React.Fragment>
{this.props.data.map(item =>
<p>{item}</p>
)}
</React.Fragment>
);
}
}
//for object, ex: data = {id: 1, name: 'John'};
class ChildComponent extends React.Component {
render() {
const {data} = this.props;
return (
<React.Fragment>
<p>{data.id}</p>
<p>{data.name}</p>
</React.Fragment>
);
}
}
//for single value (string, int, etc), ex: data = "my name";
class ChildComponent extends React.Component {
render() {
return (
<React.Fragment>
<p>{this.props.data}</p>
</React.Fragment>
);
}
}
//to show object as a string (could be any object mentioned before)
class ChildComponent extends React.Component {
render() {
return (
<React.Fragment>
{JSON.stringify(this.props.data)}
</React.Fragment>
);
}
}

You can pass down the data array as the data prop to the child component. Make sure you also uppercase the first character in the component name, or it won't work properly.
A component needs to render a single top level element, so you could e.g. render a div with the JSON stringified data prop inside of it in the child component.
class App extends React.Component {
// ...
render() {
const { data } = this.state;
return (
<div>
<ChildComponent data={data} />
</div>
);
}
}
class ChildComponent extends React.Component {
render() {
return <div>{JSON.stringify(this.props.data)}</div>;
}
}

How to pass data from parent to child in react.js

I have a parent component which has 1 child. I am updating my child by passing data through props. initially, it works fine but when I click on a button and update the state using setState the child gets rendered with old values by the time setState is finished. I have solved it using componentWillReceiveProps in the child but is this the right way?
In the below code if I do setState in filterResults function it won't update the Emplist component .
import React, { Component } from 'react';
import {Search} from './search-bar'
import Emplist from './emplist'
class App extends Component {
constructor(props){
super(props);
this.emp=[{
name:'pawan',
age:12
},
{
name:'manish',
age : 11
}]
this.state={emp:this.emp};
this.filterResults=this.filterResults.bind(this);
}
filterResults(val)
{
if(this.state)
{
let filt=[];
filt.push(
this.emp.find(e=>{
return e.age==val
})
);
this.setState({emp:filt});
}
}
render() {
return (
<div className="App">
<Search filterResults={this.filterResults}/>
<Emplist emp={this.state.emp}/>
</div>
);
}
}
export default App;
EmpList Componet
import React,{Component} from 'react'
export default class Emp extends Component
{
constructor(props){
super(props);
this.emplist=this.props.emp.map(e=>{return <li>{e.name}</li>});
this.next=this.emplist;
}
componentWillReceiveProps(nextProps,nextState,prevProps,prevState,nextContext,prevContext){
// this.props.updated(this.props.empo);
this.next=nextProps.emp[0];
if(this.next)
this.emplist= nextProps.emp.map(e=>{return <li>{e.name}</li>});
}
render(){
if(!this.next)
return <div>name not found</div>
else
return (
<div>
<br/>
<p>The list is here</p>
<ul>
{this.emplist}
</ul>
</div>
)
}
}

If you want to pass from parent to child you can pass using props and if you wan t to do reverse than you can pass one function from parent to child and than use this passed function to send something back to parent.
child will look something like this
class Reciepe extends Component{
render(){
const { title, img, instructions } = this.props;
const ingredients=this.props.ingredients.map((ing,index)=>(<li key={index} >{ing}</li>));
return (
<div className='recipe-card'>
<div className='recipe-card-img'> <img src={img} alt={title}/> </div>
<div className='recipe-card-content'>
<h3 className='recipe-title'>Reciepe {title}</h3>
<ul> {ingredients} </ul>
<h4>Instructions:</h4>
<p>{instructions}</p>
</div>
</div>
)
}
}
parent will look something like this
class RecipeList extends Component{
render(){
return (
<div style={{'display':'flex'}}>
{this.props.recipes.map((item,index)=>(
<Recipe key={index}
title={item.title}
ingredients={item.ingredients}
instructions={item.instructions}
img={item.img}
/>
))}
</div>
)
}
}

The problem is that you are assigning the values to this which is not a good practice. Check where to declare variable in React here.
If you are not using the props to do any complex operations. This should work.
EmpList Componet
import React, {Component} from 'react'
export default class Emp extends Component {
constructor(props) {
super(props);
}
render() {
if (!this.next)
return <div>name not found</div>;
else
return (
<div>
<br/>
<p>The list is here</p>
<ul>
{this.props.emp && this.props.emp.map(e => <li>{e.name}</li>)}
</ul>
</div>
)
}
}

Your next and emplist class properties are directly derivable from your props and hence you don't actually need them. You could do it in the following way
import React,{Component} from 'react'
export default class Emp extends Component{
render(){
const { emp } = this.props;
if(!emp || emp.length === 1)
return <div>name not found</div>
else {
return (
<div>
<br/> <p>The list is here</p>
<ul>
{emp.map(e=>{return <li>{e.name}</li>});}
</ul>
</div>
)
}
}
}
However in cases when you do what to make really complex decisions based on props, a combination of componentWillReceiveProps and componentDidMount/componentWillMount is the right place to do it.

Why does importing a class make this code fail?

I'm a real beginner in javascript / React...but I'm trying to set-up a tag based on a string value. Why does widget1 fail to get instantiated? (I get an uncaught ReferenceError: FooA is not defined error) What difference does importing the react component make, versus defining it in the same file?
import React, {Component} from "react";
import ReactDOM from "react-dom";
// Assume FooA and FooB have identical definitions
import FooA from './fooa.jsx'
class FooB extends Component {
render() {
return(<p>Hello A</p>);
}
};
class Splash extends Component {
render() {
var widget1 = eval('new ' + "FooA")
var widget2 = eval('new ' + "FooB")
return (
<div>
{(widget1.render())}
{(widget2.render())}
</div>
)
};
}
ReactDOM.render(<Splash/>, container);
I am passing this through webpack to get a single .js file.
Is there a better way to achieve this?

You dont have to instantiate Components, React does that for you.
Your Splash component should look like this:
class Splash extends Component {
render() {
return (
<div>
<FooA />
<FooB />
</div>
)
};
}
Now lets supouse you want to have some logic to determine which component must be rendered:
class Splash extends Component {
let comp = (<FooA />);
if(some condition)
comp = (<FooB />);
render() {
return (
<div>
{comp}
</div>
)
};
}
Now let supouse you want just to parametrize the text:
class FooA extends Component {
render() {
return(<p>this.props.textToShow</p>);
}
};
class Splash extends Component {
let text = 'whatever text you want to show';
render() {
return (
<div>
<FooA textToShow={text}/>
</div>
)
};
}
You can pass as a prop other components as well:
class FooA extends Component {
render() {
return(
<p>Some text</p>
{this.props.child}
);
}
};
class FooAChild extends Component {
render() {
return(
<p>I am a child</p>
);
}
};
class Splash extends Component {
let child = (<FooAChild />);
render() {
return (
<div>
<FooA child={child}/>
</div>
)
};
}

You're coming at this problem from the wrong angle. If you want to make a component able to render other components in a generic, reusable way, there's three approaches you can take:
Pass the component class as a prop
class Splash extends Component {
render() {
let heading = this.props.heading;
// These have to start with a capital letter, otherwise
// JSX assumes 'widget1' is a normal HTML element.
let Widget1 = this.props.widget1;
let Widget2 = this.props.widget2;
return (
<div>
<h1>{heading}</h1>
<Widget1 />
<Widget2 />
</div>
)
};
}
// This can then be used like so:
<Splash heading="My Generic Splash" widget1={FooA} widget2={FooB} />
Pass the component instance as a prop:
class Splash extends Component {
render() {
let heading = this.props.heading;
let widget1 = this.props.widget1;
let widget2 = this.props.widget2;
return (
<div>
<h1>{heading}</h1>
{widget1}
{widget2}
</div>
)
};
}
// This can then be used like so:
let fooA = <FooA />;
<Splash heading="My Generic Splash" widget1={fooA} widget2={<FooB />} />
Pass the components as children:
class Splash extends Component {
render() {
let heading = this.props.heading;
return (
<div>
<h1>{heading}</h1>
{this.props.children}
</div>
)
};
}
// This can then be used like so:
<Splash heading="My Generic Splash">
<FooA />
<FooB />
</Splash>