We Keep Coding

How to add class to a passed Component

When trying to pass a component as a prop of another component, everything works fine.
But if i want instead pass a Component and handle its css classes inside the children, I'm currently lost.
In my mind im trying to achieve something similar to this:
import Navbar from 'what/ever/path/Navbar/is/in/Navbar.js';
export default function ParentComponent {
return(
<Navbar NavIcon={<MyIcon/>} />
)
}
.... Imports etc...
export default function Navbar(props) {
const {NavIcon} = props;
return(
<Navigation>
// Now use the Prop as a Component and pass default classNames to it.
// So that we don't need to wrap everything inside a span / div etc.
<NavIcon className="AddCustomStylesAlwaysHere" />
</Navigation>
)
}

Two approaches come to my mind:
Passing a component
Just pass the component and let the parent take care of its instantiation. This way, the only changes you need is making sure <MyIcon /> accepts a className prop:
const MyIcon = ({ className }) => {
return <div className={className} />
};
const Navbar = ({ NavIcon }) => {
return (
<Navigation>
<NavIcon className="AddCustomStylesAlwaysHere" />
</Navigation>
);
};
<Navbar NavIcon={MyIcon} />
Passing an element instance
This way, you take care of instantiating the component and the parent just renders it. In this case, you have to use React utilities to modify existing elements (https://reactjs.org/docs/react-api.html#cloneelement):
const MyIcon = ({ className }) => {
return <div className={className} />
};
const Navbar = ({ NavIcon }) => {
return (
<Navigation>
{React.cloneElement(NavIcon, { className: 'AddCustomStylesAlwaysHere' })}
</Navigation>
);
};
<Navbar NavIcon={<MyIcon />} />

You can use React.Children.map in combination with React.cloneElement:
{
React.Children.map(children, ( child, idx ) => {
return React.cloneElement(child, { className: 'additional-classnames' })
})
}

React component state not updating with passed props

I have created an Accordion component which has data(object) and expanded(boolean) as props.
expanded props is used to set the expanded/collapsed state of this component passed as a prop.
const DeltaAccordion = ({ index, data, expanded = true }) => {
Accordion component also has an internal state
const [isExpanded, setIsExpanded] = useState(expanded);
which is used for expanding/collapsing the accordion.
Below is my complete component
Accordion.jsx
import React, { useState } from "react";
// styles
import styles from "./index.module.scss";
const Accordion = ({ index, data, expanded = true }) => {
// state
const [isExpanded, setIsExpanded] = useState(expanded);
console.log(data.name, `prop-val==${expanded}`, `inner-state==${isExpanded}`);
return (
<div
className={`${styles.container} caption ${isExpanded && styles.expanded}`}
>
<div className={styles.header} onClick={() => setIsExpanded(!isExpanded)}>
<div>{data.name}</div>
<div>Click</div>
</div>
<div className={styles.content}>
{data.newValue && (
<div className={styles.newValue}>
<span>{data.newValue}</span>
</div>
)}
{data.oldValue && (
<div className={styles.oldValue}>
<span>{data.oldValue}</span>
</div>
)}
</div>
</div>
);
};
export default Accordion;
The parent component has a list of data and it loops through the list to create an accordion for each data item.
App.js file
{dataList.map((data, index) => (
<Accordion data={data} expanded={!collpaseAll} index={1} />
))}
Here goes problem
There is also a button in my App.js file which is for either expanding/collapsing all the accordions together.
But when I pass its value as prop expanded to the accordion component then this value is not getting applied to the internal isExpanded state of the accordion component.
Here is live running code at codesandbox: https://codesandbox.io/s/goofy-nobel-qfxm1?file=/src/App.js:635-745

Inside the Accordion
const [isExpanded, setIsExpanded] = useState(expanded);
This line will take first time(on first render) value. To assign it next time(rerender) value you need to add a effect
useEffect(() => {
setIsExpanded(expanded);
}, [expanded]);
And in your case, you can use the props expanded directly inside Accordion, you dont need to take it in local state.

Send selected options from react dual listbox with post request

I'm trying to implement in my react app, two react double listbox in my component. At the moment the listboxes are filled automatically after a get request when component mounts. I need some help on how to get the selected options in each double listbox and send them to the server as json data.
I need two arrays from these lists.
This is my dual listbox classes:
import React from 'react';
import DualListBox from 'react-dual-listbox';
import 'react-dual-listbox/lib/react-dual-listbox.css';
import 'font-awesome/css/font-awesome.min.css';
export class FirstList extends React.Component {
state = {
selected: [],
};
onChange = (selected) => {
this.setState({ selected });
};
render() {
const { selected } = this.state;
return (
<DualListBox
canFilter
filterPlaceholder={this.props.placeholder || 'Search From List 1...'}
options={this.props.options}
selected={selected}
onChange={this.onChange}
/>
);
}
}
export class SecondList extends React.Component {
state = {
selected: [],
};
onChange = (selected) => {
this.setState({ selected });
};
render() {
const { selected } = this.state;
return (
<DualListBox
canFilter
filterPlaceholder={this.props.placeholder || 'Search From List 2...'}
options={this.props.options}
selected={selected}
onChange={this.onChange}
/>
);
}
}
In my component I started importing this:
import React, { useState, useEffect } from 'react'
import LoadingSpinner from '../shared/ui-elements/LoadingSpinner';
import ErrorModal from '../shared/ui-elements/ErrorModal';
import { FirstList, SecondList } from '../shared/formElements/DualListBox';
import { useHttpClient } from '../shared/hooks/http-hook';
const MyComponent = () => {
const { isLoading, error, sendRequest, clearError } = useHttpClient();
const [loadedRecords, setLoadedRecords] = useState();
useEffect(() => {
const fetchRecords = async () => {
try {
const responseData = await sendRequest(
process.env.REACT_APP_BACKEND_URL + '/components/get'
);
setLoadedRecords(responseData)
} catch (err) { }
};
fetchRecords();
}, [sendRequest]);
...
...
return (
<React.Fragment>
<ErrorModal error={error} onClear={clearError} />
<form>
<div className="container">
<div className="row">
<div className="col-md-6">
<fieldset name="SerialField" className="border p-4">
<legend className="scheduler-border"></legend>
<div className="container">
<p>SERIALS</p>
{loadedRecords ? (
<FirstList id='Serials' options={loadedRecords.firstRecordsList} />
) : (
<div>
<label>List is loading, please wait...</label>
{isLoading && <LoadingSpinner />}
</div>
)}
</div>
</fieldset>
</div>
<div className="col-md-6">
<fieldset name="SystemsField" className="border p-4">
<legend className="scheduler-border"></legend>
<div className="container">
<p>SYSTEMS</p>
{loadedRecords ? (
<SecondList options={loadedRecords.secondRecordsList} />
) : (
<div>
<label>List is loading, please wait...</label>
{isLoading && <LoadingSpinner />}
</div>
)}
</div>
</fieldset>
</div>
...
...
If anyone could guide me it'll be much appreciated.
Thanks in advance!

FirstList and SecondList are using internal state to show the selected values. Since a parent component should do the server request, it needs access to this data. This can be achieved by a variety of options:
Let the parent component (MyComponent) handle the state completely. FirstList and SecondList would need two props: One for the currently selected values and another for the onChange event. MyComponent needs to manage that state. For example:
const MyComponent = () => {
const [firstListSelected, setFirstListSelected] = useState();
const [secondListSelected, setSecondListSelected] = useState();
...
return (
...
<FirstList options={...} selected={firstListSelected} onChange={setFirstListSelected} />
...
<SecondList options={...} selected={secondListSelected} onChange={setSecondListSelected} />
...
)
Provide only the onChange event and keep track of it. This would be very similar to the first approach, but the lists would keep managing their state internally and only notify the parent when a change happens through onChange. I usually don't use that approach since it feels like I'm managing the state of something twice and I also need to know the initial state of the two *List components to make sure I am always synchronized properly.
Use a ref, call an imperative handle when needed from the parent. I wouldn't recommend this as it's usually not done like this and it's getting harder to share the state somewhere else than inside of the then heavily coupled components.
Use an external, shared state like Redux or Unstated. With global state, the current state can be reused anywhere in the Application and it might even exist when the user clicks away / unmounts MyComponent. Additional server requests wouldn't be necessary if the user navigated away and came back to the component. Anyways, using an external global state needs additional setup and usually feels "too much" and like a very high-end solution that is probably not necessary in this specific case.
By using option 1 or 2 there is a notification for the parent component when something changed. On every change a server request could be sent (might even be debounced). Or there could be a Submit button which has a callback that sends the saved state to the server.

How to add same component inside components

I tried to do task below, but i am stuck, How can I structure my components in a way that, it will be possible for nesting same component inside component.
App.js file
render () {
return (
<main className="wrapper">
<div className="row">
<Container addBox = { this.addBox }
boxes = {this.state.containers}
changeColor={this.changeColor}
addContainer = {this.addContainer}
containers={this.state.containers}/>
</div>
</main>
);
}

Like you add Container in app.js, create Box component and add it to Container.js, set the props as you did in this one, something like this:
import Container from "./Container.js"
state={ data1 : "something" }
render () {
return (
<main className="wrapper">
<div className="row">
<Container addBox = { this.addBox }
propsAgain={this.state.data1}
changeColor={this.changeColor}
addContainer = {this.addContainer}
containers={this.state.containers}/>
</div>
</main>
);
Container.js:
import Box from "./Box.js"
render () {
const{propsAgain}=this.props // we pass it upper again
return (
<div className="row">
<Box props1 = {propsAgain}
</div>
);
Box.js:
render () {
const {props1, props2} = this.props // these are props to pass to parent component
return (
<div>{props1}</div>
);
If you want to pass the grandchildren components' data to the upper component, you can pass the props to one step up, define props again and pass it to one step up again

ReactJs - how to use multiple children in a component

I'm prefacing this with the fact I'm VERY new to ReactJs and probably trying to work out something quite basic.
I have this code with a custom piece of HTML:
Sample Component
const Sample = ({ title, children }) => {
return (
<div class="panel">
<div class="title">
{title}
</div>
<div class="body">
{children}
</div>
</div>
);
};
Side question - whats the correct name for the above? A fragment? It doesn't look to be a "component" but just learning the naming conventions for React too
Utilise Component
export default class ExampleComponent extends Component {
render() {
return <div class="page-body">
<div class="row">
<h1> Page 1 </h1>
<Sample title={<h1>Some title!</h1>}>
<p>This is my sample body!</p>
</Sample>
</div>
</div>
}
}
You can see that the content of the "Sample" element is taken automatically as children property but to set title I have to explicitly set "title" property. What I'd ideally like to do is something similar to the below:
Desired way to utilise Sample Component
export default class ExampleComponent extends Component {
render() {
return <div class="page-body">
<div class="row">
<h1> Page 1 </h1>
<Sample title="Some title!">
<Sample.Title>
<h1>This is my new way to do a title</h1>
</Sample.Title>
<Sample.Body>
<p>This is my sample body!</p>
</Sample.Body>
</Sample>
</div>
</div>
}
}
I've used this type of approach before with components others have created but want to do it myself now and finding it hard to get a simple example to do this.
Thanks in advance for any pointers!

I think what you want is called JSX Namespacing? Either way, you can instantiate Sample, and then add more components as properties of Sample (view it as an object):
import React from "react"
const Sample = ({ children }) => (
<div className="panel">
{children}
</div>
)
Sample.Title = (props) => <div className="title">{props.children}</div>
Sample.Body = (props) => <div className="body">{props.children}</div>
export default Sample
Note: React uses className rather than class since we are using JSX.

The Children utils suit can be helpful for your scenario.
import { Children } from 'react'
const Sample = ({ title, children }) => {
let _body, _title
Children.forEach(children, child => {
if (child.type === SampleTitle) {
return _title = child
}
if (child.type === SampleBody) {
return _body = child
}
})
if (!_title) _title = <div className='title'>{title}</div>
if (!_body) _body = <div className='title'>{children}</div>
return (
<div className='panel'>
{_title}
{_body}
</div>
)
}
const SampleTitle = ({ children }) => <div className='title'>{children}</div>
const SampleBody = ({ children }) => <div className='body'>{children}</div>
Sampe.Title = SampleTitle
Sample.Body = SampleBody
Now you can use Sample in multiple ways:
<Sample title="my title">
<div>my body</div>
</Sample>
<Sample title="my title">
<Sample.Body>my body</Sample.Body>
</Sample>
<Sample title="my fallback title">
<Sample.Title>my overriding title</Sample.Title>
<Sample.Body>my body</Sample.Body>
</Sample>

In that case you just have to extract the relevant containers into their own components:
const Sample = ({children }) => (
<div className="panel">{children}</div>
);
const Title = ({children}) => (
<div className="title">{children}</div>
);
const Body = ({children}) => (
<div className="body">{children}</div>
);
Sample.Title = Title;
Sample.Body = Body;
Also note that the correct prop for a css class is className.