We Keep Coding

ReactJS: Unable to read event.target.value while creating a select menu

I am trying to create a custom menu select for my Algolia search based on the documentation here with a barebones example. I am using Tailwind and Headless UI for my component styling.
More specifically, I am trying to make this work with the ListBox component by Headless UI, which is documented here. My code is below:
import { connectMenu } from "react-instantsearch-dom";
import React, { useState, Fragment, useEffect } from "react";
import { Listbox, Transition } from "#headlessui/react";
import { CheckIcon, SelectorIcon } from "#heroicons/react/solid";
function classNames(...classes) {
return classes.filter(Boolean).join(" ");
}
const MobileDropdownS = ({ label, currentRefinement, refine, hide }) => {
const [selected, setSelected] = useState(true);
const items= [
{ value: 'category', label: 'Category' },
{ value: 'brand', label: 'Brand' },
{ value: 'color', label: 'Color' },
{ value: 'size', label: 'Size' },
]
if (hide) return null;
return (
<Listbox
onChange={(event) => {
refine(event.target.value);
setSelected(event.target.value);
}}
value={currentRefinement || ""}
>
{({ open }) => (
<div>
<Listbox.Label>{label}</Listbox.Label>
<div>
<Listbox.Button>
<span>{label}</span>
</Listbox.Button>
<Listbox.Options>
{items.map((item) => (
<Listbox.Option
key={item.label}
value={item.isRefined ? currentRefinement : item.value}
key={item.label}
className={({ active }) =>
classNames(
active ? "text-white bg-indigo-600" : "text-gray-900",
"cursor-default select-none relative py-2 pl-3 pr-9"
)
}
>
{({ selected, active }) => (
<>
<div className="flex items-center">
<span
className={classNames(
selected ? "font-semibold" : "font-normal",
"ml-3 block truncate"
)}
>
{item.label}
</span>
</div>
{selected ? (
<span
className={classNames(
active ? "text-white" : "text-indigo-600",
"absolute inset-y-0 right-0 flex items-center pr-4"
)}
>
<CheckIcon className="h-5 w-5" aria-hidden="true" />
</span>
) : null}
</>
)}
</Listbox.Option>
))}
</Listbox.Options>
</div>
</div>
)}
</Listbox>
);
};
const MobileDropdownSelect = connectMenu(MobileDropdownS);
export default MobileDropdownSelect;
The way I understand it, ListBox becomes the <select> tag from Algolia's documentation, where I should add this:
refine(event.target.value);
setSelected(event.target.value);
However, this gives me the following error:
×
TypeError: Cannot read properties of undefined (reading 'value')
onChange
D:/Gatsby/XTheme/src/components/search/MobileDropdown.jsx:22
19 | <Listbox
20 | onChange={
21 | event => {
> 22 | refine(event.target.value)
23 | setSelected(event.target.value)
24 | }
25 | }
Is this not correct? How do I fix this error and port over Algolia's example with the <select> input to the <ListBox> component such that when I select an item from the Listbox, it refines the search based on the item?

Tru using event.currentTarget.value in place of event.target.value . You can find difference between both in this link

How to pass a selected value from nested object to chip

I have an object of the following type:
[
{
"insInvolvementId": "01",
"clientId": "AB",
"client": {
"firstName": "JAMCN",
"middleName": null,
"lastName": "PERGY"
},
"involvementRole": [
{
"involvementRoleId": "01A",
"insInvolvedId": "01",
"involvementRoleDescription": "Driver"
},
{
"involvementRoleId": "01B",
"insInvolvedId": "01",
"involvementRoleDescription": "Owner"
},
{
"involvementRoleId": "01C",
"insInvolvedId": "01",
"involvementRoleDescription": "Insured"
}
]
}
]
I have the following code snippet to render the object:
import React from 'react';
import { useState } from 'react';
import Typography from '#material-ui/core/Typography';
import { makeStyles } from '#material-ui/core/styles';
import CLAIMS from './Participant_data';
const useStyles = makeStyles((theme)=>({
typography : {
fontSize:'3.5 rem',
fontWeight:'550',
color:'#0E1941',
marginBottom:'30px',
[theme.breakpoints.down('md')]: {
fontSize: '0.5rem',
},
[theme.breakpoints.up('md')]: {
fontSize: '1.0rem',
},
[theme.breakpoints.up('lg')]: {
fontSize: '1.2rem',
}
},
font_class : {
font: 'normal normal 900 20px/24px Allstate Sans',
// letter-spacing: '0px',
color: '#0E1941',
opacity: '1',
fontSize:'1.2rem'
}
}));
const Checkbox = (props) => {
// creates all the checkbox based on the list array.
const classes = useStyles();
const checkbox = props.list.map((m) => (
// <span key={m.key}>
m.involvementRole.map((role) => (
<div>
<table>
<tbody style={{ width: "100%" }}>
{/* {CLAIMS.map((m) => */}
<tr>
<td style={{ width: "60px" }}>
{" "}
<input
type="checkbox"
id = {role.involvementRoleDescription}
onClick={() => props.handleCheckboxChange(m)
}
/>
</td>
<td style={{ width: "250px" }} value={role.involvementRoleDescription}>
{role.involvementRoleDescription}
</td>
<td style={{ width: "250px" }}>
{m.client.firstName + " " + m.client.lastName}
</td>
</tr>
</tbody>
</table>
</div>
))
));
return (
<div style={{width:'100%'}}>
<div style={{backgroundColor:'#E9E9E9' , width:'100%' , marginTop:'10px' ,
marginBottom:'10px'}}> <typography variant="body1" className={classes.typography} style=
{{marginTop:'10px' , marginBottom:'30px' , font: "normal normal medium 20px/24px Allstate
Sans W"}}> {props.title} </typography></div>
<div className = {classes.font_class}>{checkbox}</div>
</div>
);
};
export default Checkbox;
on click of the checkbox an array or selected values will be created and the selected values will be passed to the chip
const [chipData, setChipData] = React.useState([]);
const handlePerformerDelete = (chipToDelete) => () => {
setChipData((chips) => chips.filter((chip) => chip.key !== chipToDelete.key));
console.log(chipData);
};
const handleCheckboxChange = (insInvolvementId, setParticipants) => {
setParticipants((currentParticipants) =>
currentParticipants.includes(insInvolvementId )
? currentParticipants.filter((f) => f !== insInvolvementId)
: [...currentParticipants, insInvolvementId]
);
};
console.log(claimParticipants);
const handleSubmit=()=>{
setChipData(claimParticipants);}
The object I have rendered on screen is something like this
I want the firstname,lastname and role desc to be passes to the chip but I am not able to get the specific role for the checkbox we clicked.

Popover does not show up in React

I am trying to make a webapplication with Treeviz dependency. The goal is to place a popover button to each node of the tree and if user clicks to the button he/she can see the description of the node,and after it should be editable. I tried in many ways but for me popover does not work in React.
There is an example for what I would like to do. You can see I have to insert React component to HTML therefor I am using renderToString. All you have to look is the renderNode property of the tree. I am referencing to React component in renderNode like: ${tooltip} ${popover}.
import React from "react";
import { TreevizReact } from "treeviz-react";
import { renderToString } from "react-dom/server";
const data_1 = [
{
id: 1,
text_1: "Chaos",
description: "Void",
father: null,
color: "#FF5722"
},
{
id: 2,
text_1: "Tartarus",
description: "Abyss",
father: 1,
color: "#FFC107"
},
{ id: 3, text_1: "Gaia", description: "Earth", father: 1, color: "#8BC34A" },
{ id: 4, text_1: "Eros", description: "Desire", father: 1, color: "#00BCD4" }
];
export const App = () => {
return (
<div style={{ marginLeft: 10 }}>
<div style={{ display: "flex" }}>
<TreevizReact
data={data_1}
relationnalField={"father"}
nodeWidth={120}
nodeHeight={80}
areaHeight={500}
areaWidth={1000}
mainAxisNodeSpacing={2}
secondaryAxisNodeSpacing={2}
linkShape={"quadraticBeziers"}
renderNode={(data) => {
const nodeData = data.data;
const settings = data.settings;
let result = "";
const tooltip = renderToString(
<strong
data-toggle="tooltip"
data-placement="top"
title={nodeData.description}
>
{nodeData.text_1}
</strong>
);
const popover = renderToString(
<button
type="button"
className="btn btn-secondary"
data-container="body"
data-toggle="popover"
data-placement="top"
data-content={nodeData.description}
>
Popover on top
</button>
);
if (data.depth !== 2) {
result = `<div className="box"
style='cursor:pointer;height:${settings.nodeHeight}px; width:${settings.nodeWidth}px;display:flex;flex-direction:column;justify-content:center;align-items:center;background-color:${nodeData.color};border-radius:5px;'>
<div>
${tooltip}
${popover}
</div></div>`;
} else {
result = `<div className="box" style='cursor:pointer;height:${
settings.nodeHeight
}px; width:${
settings.nodeHeight
}px;display:flex;flex-direction:column;justify-content:center;align-items:center;background-color:${
nodeData.color
};border-radius:${settings.nodeHeight / 2}px;'><div><strong>
${nodeData.text_1}
</strong></div></div>`;
}
return result;
}}
duration={600}
isHorizontal
linkWidth={(node) => 10}
/>
</div>
</div>
);
};
export default App;
Tooltip is working but popover does not show up.
You can try it: https://codesandbox.io/s/zealous-orla-4bq5f?file=/src/App.js
Also tried
const popover = renderToString(
<Popup
trigger={<button> Trigger</button>}
position="right center"
>
<form onSubmit={saveHandler}>
<ContentEditable
html={text.current}
onChange={handleChange}
/>
<button type="submit">Save</button>
<button>Cancel</button>
</form>
</Popup>
const popoverContent = (
<Popover id="popover-basic">
<Popover.Header as="h3">Popover right</Popover.Header>
<Popover.Body>
And here's some <strong>amazing</strong> content. It's very
engaging. right?
</Popover.Body>
</Popover>
);
const popover = renderToString(
<OverlayTrigger
trigger="click"
placement="right"
overlay={popoverContent}
>
<Button variant="success">Click me to see</Button>
</OverlayTrigger>
);
None of them worked for me.

Probably your approach doesn't work because the dom elements in the tree are created dynamically, and bootstrap doesn't set them up.
A more react-ish way to do it would be using react-bootstrap lib and managing every UI aspect in states. To implement the tooltip, the Overlay component actually as a prop called target that allows you to change over what element the tooltip is shown.
<Overlay target={tooltipTarget} show={showTooltip} placement="right">
{(props) => (
<Tooltip id="overlay-example" {...props}>
{tooltipNode?.data.text_1}
</Tooltip>
)}
</Overlay>
Then you only need to manage all these states in the onNodeMouseEnter and onNodeMouseLeave handlers in the TreevizReact component.
onNodeMouseEnter={(_event, node) => {
const t = document.querySelector(`#node-${node.id}`);
setTooltipTarget(t);
setShowTooltip(true);
setTooltipNode(node);
}}
onNodeMouseLeave={(_event, node) => {
setTooltipTarget(null);
setShowTooltip(false);
setTooltipNode(null);
}}
The popup follows the same logic with another set of states.
<div ref={ref}>
<Overlay
show={!!selectedNode.current}
target={target}
placement="bottom"
container={ref.current}
containerPadding={20}
>
<Popover id="popover-contained">
{/* hack to avoid weird blinking (due mutable state) */}
{!!selectedNode.current && (
<>
some form based on node data
{JSON.stringify(selectedNode.current?.data)}
</>
)}
</Popover>
</Overlay>
</div>
and in onNodeClick handler
onNodeClick={(_event, node) => {
const t = document.querySelector(`#node-${node.id}`);
// unselect if already selected
if (selectedNode.current?.id === node.id) {
selectedNode.current = null;
setTarget(null);
} else {
selectedNode.current = node;
setTarget(t);
}
}}
You might notice this time I used a mutable variable via a ref (selectedNode.current), for some reason using a state caused some issues, maybe due to D3 and react having different rendering cycles, reason why you'll probably encounter some other glitches in this implementation.
https://codesandbox.io/s/quizzical-buck-slofh?file=/src/App.js

How to update parent state and child components props at once (at the same time)

I'm new to React and basically I'm trying to update a parent App.js components' state and its child components (Team.js and Player.js) props at once. Currently only the parent components' state is being updated. I will try to explain it better with a step by step.
Here I have a parent component App.js
export default function App() {
const teams = [
{
Name: "Chicago Bulls",
Players: ["Michael Jordan", "Dennis Rodman", "Scottie Pippen"],
Championships: 6
},
{
Name: "Golden State Warriors",
Players: ["Stephen Curry", "Klay Thompson", "Draymond Green"],
Championships: 5
},
{
Name: "Los Angeles Lakers",
Players: ["Kobe Bryant", "LeBron James", "Magic Johnson"],
Championships: 17
}
];
const [selectedTeam, setSelectedTeam] = useState({});
const players = [
{ Name: "LeBron James", MVPs: 4 },
{ Name: "Michael Jordan", MVPs: 5 },
{ Name: "Stephen Curry", MVPs: "2" }
];
const [selectedPlayer, setSelectedPlayer] = useState({});
const [modalContent, setModalContent] = useState(false);
const clickedComponent = useRef(null);
const [show, setShowModal] = useState(false);
const showModal = () => {
setShowModal(true);
};
const hideModal = () => {
setShowModal(false);
};
const handleModalContent = (clicked) => {
switch (clicked) {
case "Team":
clickedComponent.current = (
<Team
teams={teams}
selectedTeam={selectedTeam}
setSelectedTeam={setSelectedTeam}
/>
);
break;
case "Player":
clickedComponent.current = (
<Player
players={players}
selectedPlayer={selectedPlayer}
setSelectedPlayer={setSelectedPlayer}
/>
);
break;
default:
clickedComponent.current = null;
break;
}
};
return (
<div className="App" style={{ justifyContent: "space-evenly" }}>
<div
style={{
justifyContent: "center",
width: "100%",
display: "flex",
flexWrap: "wrap",
margin: "40px 0px 0px 0px"
}}
>
<div
className="table-cell"
onClick={() => {
handleModalContent("Team");
setModalContent(true);
showModal();
}}
>
<div className="table-cell-text">Click to access Team component</div>
</div>
<div
className="table-cell"
onClick={() => {
handleModalContent("Player");
setModalContent(true);
showModal();
}}
>
<div className="table-cell-text">
Click to access Player component
</div>
</div>
</div>
<h3 style={{ marginTop: "30px" }}>
The last selected team was: {selectedTeam.Name}
<br />
The last selected player was: {selectedPlayer.Name}
</h3>
<Modal show={show} modalClosed={hideModal}>
{(modalContent && clickedComponent.current) || null}
</Modal>
</div>
);
}
This component has two arrays of objects (teams and players) that is sent to Team and Player components, respectively, as props. Team also receives selectedTeam and setSelectedTeam as props. Player receives selectedPlayer and setSelectedPlayer. Both components have a Modal component and a select input. In the Team component, the user will select a team and them it will be displayed the selected teams' players, while in the Player component a player will be select and them it will be displayed the amount of MVP of the selected player.
Team.js
const Team = (props) => {
return (
<div style={{ position: "relative", margin: "0 auto", width: "10em" }}>
<h3>Select a team</h3>
<div className="input-group col">
<select
onChange={(e) => {
if (e === "") props.setSelectedTeam({});
else {
let foundTeam = props.teams.find(
(team) => team.Name === e.target.value
);
props.setSelectedTeam(foundTeam);
}
}}
>
<option value="">Select a team...</option>
{props.teams.map((team) => (
<option key={team.Name} value={team.Name}>
{team.Name}
</option>
))}
</select>
</div>
{Object.keys(props.selectedTeam).length > 0 ? (
<div>
<h3>{props.selectedTeam.Name} players: </h3>
<br />
{props.selectedTeam.Players.map((player, index) => (
<div key={index}>{player}</div>
))}
</div>
) : null}
</div>
);
};
export default Team;
Player.js
const Player = (props) => {
return (
<div style={{ position: "relative", margin: "0 auto", width: "10em" }}>
<h3>Select a player</h3>
<div className="input-group col">
<select
onChange={(e) => {
if (e === "") props.setSelectedPlayer({});
else {
let foundPlayer = props.players.find(
(player) => player.Name === e.target.value
);
props.setSelectedPlayer(foundPlayer);
}
}}
>
<option value="">Select a player...</option>
{props.players.map((player) => (
<option key={player.Name} value={player.Name}>
{player.Name}
</option>
))}
</select>
</div>
{Object.keys(props.selectedPlayer).length > 0 ? (
<div>
<h3>
{props.selectedPlayer.Name} MVPs: {props.selectedPlayer.MVPs}
</h3>
</div>
) : null}
</div>
);
};
export default Player;
So my problem is, if I select an option in the child components, they don't receive the updated selected option (I mean selectedTeam for Team component and selectedPlayer for Player component) immediatelly but in the father component App I have them updated. So, if I want them to get updated, I need to select an option, close the modal and reopen them again.
For example, here I have App.js visual:
If I open Team.js and select a team, I have selectedTeam updated in App.js but not in Team.js:
So, if I close the modal and reopen Team component again, then I have props.selectedTeam updated. So I have the following:
I have the same problem with Player component, but in this case regarding props.selectedPlayer
How can I make it work properly, I mean, how can I have props.selectedTeam and props.selectedPlayer updated at once in App such as in Team and Player, respectively? Thank you!
CodeSandbox
https://codesandbox.io/s/young-sun-gs117?file=/src/Team.js:51-1127

Here is what you need to do, I refactored your code and add some comments on that so you know what I did that. one thing to remember is that almost you don't want to store a component in a state.
export default function App() {
const teams = [
{
Name: "Chicago Bulls",
Players: ["Michael Jordan", "Dennis Rodman", "Scottie Pippen"],
Championships: 6,
},
{
Name: "Golden State Warriors",
Players: ["Stephen Curry", "Klay Thompson", "Draymond Green"],
Championships: 5,
},
{
Name: "Los Angeles Lakers",
Players: ["Kobe Bryant", "LeBron James", "Magic Johnson"],
Championships: 17,
},
];
const players = [
{ Name: "LeBron James", MVPs: 4 },
{ Name: "Michael Jordan", MVPs: 5 },
{ Name: "Stephen Curry", MVPs: "2" },
];
// This makes typo mistake less and will give you auto complete option
const componentType = {
team: "Team",
player: "Player",
};
const [selectedTeam, setSelectedTeam] = useState({});
const [selectedPlayer, setSelectedPlayer] = useState({});
// the modalContent state and show state are doing the same thing so one of them is unneccessary
const [show, setShowModal] = useState(false);
const [clickedComponent, setClickedComponent] = useState("");
const showModal = () => {
setShowModal(true);
};
const hideModal = () => {
setShowModal(false);
};
const handleModalContent = (clicked) => {
setClickedComponent(clicked);
};
return (
<div className="App" style={{ justifyContent: "space-evenly" }}>
<div
style={{
justifyContent: "center",
width: "100%",
display: "flex",
flexWrap: "wrap",
margin: "40px 0px 0px 0px",
}}
>
<div
className="table-cell"
onClick={() => {
handleModalContent(componentType.team);
showModal();
}}
>
<div className="table-cell-text">Click to access Team component</div>
</div>
<div
className="table-cell"
onClick={() => {
handleModalContent(componentType.player);
showModal();
}}
>
<div className="table-cell-text">
Click to access Player component
</div>
</div>
</div>
<h3 style={{ marginTop: "30px" }}>
The last selected team was: {selectedTeam.Name}
<br />
The last selected player was: {selectedPlayer.Name}
</h3>
<Modal show={show} modalClosed={hideModal}>
{clickedComponent === componentType.player ? (
<Player
players={players}
selectedPlayer={selectedPlayer}
setSelectedPlayer={setSelectedPlayer}
/>
) : clickedComponent === componentType.team ? (
<Team
teams={teams}
selectedTeam={selectedTeam}
setSelectedTeam={setSelectedTeam}
/>
) : null}
</Modal>
</div>
);
}

The way I know how is to just use Hooks useState and useEffect and just update that state on select change.
Hope the below example for Player helps (worked in your code sandbox unless I am not answering your question):
import React, { useState, useEffect } from "react";
import "./styles.css";
const Player = (props) => {
const [test, setTest] = useState("");
useEffect(() => {
console.log("props:", props);
setTest(props.selectedPlayer);
}, [props]);
return (
<div style={{ position: "relative", margin: "0 auto", width: "10em" }}>
<h3>Select a player</h3>
<div className="input-group col">
<select
value={props.selectedPlayer}
onChange={(e) => {
if (e === "") props.setSelectedPlayer({});
else {
let foundPlayer = props.players.find(
(player) => player.Name === e.target.value
);
props.setSelectedPlayer(foundPlayer);
setTest(foundPlayer);
}
}}
>
<option value="">Select a player...</option>
{props.players.map((player) => (
<option key={player.Name} value={player.Name}>
{player.Name}
</option>
))}
</select>
</div>
<h3>{test.Name} MVPs: {test.MVPs}</h3>
{/* {Object.keys(props.selectedPlayer).length > 0 ? (
<div>
<h3>
{props.selectedPlayer.Name} MVPs: {props.selectedPlayer.MVPs}
</h3>
</div>
) : null} */}
</div>
);
};
export default Player;

Controlling the way selected value inside the select box looks : Is there a way to render the selected item separately?

I am working with the antd' select box. I tried to customise the content inside Option which holds the regular text with some JSX. It looks as follows:
Here is also the small demo I prepared on sandbox:
Since I have customised the content inside the Option, the moment I make a choice with the Select Box, it gets shown as:
As you could see, the select box tries to show everything. Is there a way I could control how the select box looks just after the choice is made with the select box? I just want the name to be displayed after the selection is made. For example, product-1 must be displayed when the first option is selected.
For easier reference, I am also posting the code here:
import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Select } from "antd";
const { Option } = Select;
const data = [
{
productName: "product-1",
productExternalId: "DT01A",
productionExternalId: "PL-DT01A",
quantity: "700 kg"
},
{
productName: "product-2",
productExternalId: "DT01A",
productionExternalId: "PL-DT01A",
quantity: "700 kg"
},
{
productName: "product-3",
productExternalId: "DT01A",
productionExternalId: "PL-DT01A",
quantity: "700 kg"
}
];
const ProductSelectBox = React.memo(props => {
const { details } = props;
function onSelect(value, option) {
console.log(value, "..", option);
}
function customizedOption({
productName,
productExternalId,
productionExternalId,
quantity
}) {
return (
<Option
className="product-select-box-item"
key={productName}
value={productName}
>
<div className="d-flex flex-column">
<div className="d-flex" style={{ marginBottom: "0.2rem" }}>
<div className="mr-auto-1 font-weight-bold">{productName}</div>
<div className="uppercase">{productionExternalId}</div>
</div>
<div className="d-flex" style={{ marginBottom: "0.01rem" }}>
<div className="mr-auto-1 uppercase">{productExternalId}</div>
<div>{quantity}</div>
</div>
</div>
</Option>
);
}
return (
<Select
// labelInValue
// defaultValue={{ key: "product-3", label: "product-3" }}
className="product-select-box"
size="large"
onSelect={onSelect}
>
{details.map(product => customizedOption(product))}
</Select>
);
});
ReactDOM.render(
<div>
<ProductSelectBox details={data} />
</div>,
document.getElementById("container")
);

Referring from your comment:
To fix your warnings, on customizedDisplayOnSelection and getSelectedMeta you should return a ReactNode and not a string, for example you can just return null which is a valid ReactNode or not return anything.
function customizedDisplayOnSelection(productName) {
if (productMap[productName]) {
...
}
// or
else {
return null;
}
}
Furthermore, you can take advantage of && short-circuit.
const customizedDisplayOnSelection = productName =>
productMap[productName] && (
<span className="font-weight-medium">
{productMap[productName].productExternalId} -{productName}
</span>
);
Check fixed example:

I was able to achieve this with the antd's value property on Select box. Here is the demo I updated in sandbox:
For easier reference, I am also posting the code here:
import React, { useState } from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Select } from "antd";
const { Option } = Select;
const data = [
{
productName: "product-1",
productExternalId: "DT01A",
productionExternalId: "PL-DT01A",
quantity: "700 kg"
},
{
productName: "product-2",
productExternalId: "DT02A",
productionExternalId: "PL-DT02A",
quantity: "702 kg"
},
{
productName: "product-3",
productExternalId: "DT03A",
productionExternalId: "PL-DT03A",
quantity: "703 kg"
}
];
const ProductSelectBox = React.memo(props => {
const { details } = props;
let { defaultSelected } = props;
const productMap = {};
details.forEach(product => {
productMap[product.productName] = product;
});
const [selectedProduct, selectProduct] = useState(defaultSelected);
function onSelect(value) {
selectProduct(value);
}
function customizedDisplayOnSelection(productName) {
if (productMap[productName]) {
const productExternalId = productMap[productName]["productExternalId"];
return (
<span className="font-weight-medium">
{productExternalId} - {productName}
</span>
);
} else {
return "";
}
}
function getSelectedMeta() {
if (productMap[selectedProduct]) {
return (
<span className="font-weight-medium">
(
<span className="uppercase">
production id: {productMap[selectedProduct]["productionExternalId"]}
</span>
<span style={{ marginLeft: "0.75rem" }}>
Batch Size: {productMap[selectedProduct]["quantity"]}
</span>
)
</span>
);
} else {
return "";
}
}
function customizedOption({
productName,
productExternalId,
productionExternalId,
quantity
}) {
return (
<Option
className="product-select-box-item"
key={productName}
value={productName}
>
<div className="d-flex flex-column">
<div className="d-flex" style={{ marginBottom: "0.2rem" }}>
<div className="mr-auto-1 font-weight-bold">{productName}</div>
<div className="uppercase">{productionExternalId}</div>
</div>
<div className="d-flex" style={{ marginBottom: "0.01rem" }}>
<div className="mr-auto-1 uppercase">{productExternalId}</div>
<div>{quantity}</div>
</div>
</div>
</Option>
);
}
return (
<div className="d-flex flex-row">
<Select
className="product-select-box auto-flex"
size="large"
value={customizedDisplayOnSelection(selectedProduct)}
onSelect={onSelect}
>
{details.map(product => customizedOption(product))}
</Select>
<div className="d-flex align-items-center auto-flex">
{getSelectedMeta()}
</div>
</div>
);
});
ReactDOM.render(
<div>
<ProductSelectBox details={data} defaultSelected="" />
</div>,
document.getElementById("container")
);