We Keep Coding

Show corresponding blocks and including extras depending on selection - React

I have this code below - it is designed to show three different packages depending on price point, so for example 'The Works' will show all three of the last three columns and the orange styled project value and 'The Starter' will show the corresponding price point but add a low opacity class to the second and third column when selected. Currently I have this working when the info is pulled in from contentful but I have a requirement to make this clickable. My confusion is where the elements aren't mapped via an array so I can't add an iterator to target it that way. I don't really want to write three functions as that is just messy and but if that is the only way then
<FlexInline>
<HalfWidth>
<CostTitle onClick={() => toggleVisibilty()} className={props.works == true && props.scaler == true && props.starter == true ? "active-cost-title-orange" : "inactive-cost-title"}><h3>The Works</h3></CostTitle>
<CostTitle onClick={() => toggleVisibilty()} className={props.scaler == true && props.starter == true && props.works != true ? "active-cost-title-blue" : "inactive-cost-title"}><h3>The Scaler</h3></CostTitle>
<CostTitle onClick={() => toggleVisibilty()} className={props.starter == true && props.scaler != true && props.works != true ? "active-cost-title-black" : "inactive-cost-title"}><h3>The Starter</h3></CostTitle>
</HalfWidth>
<HalfWidth>
{props.works == true && props.scaler == true && props.starter == true ? (
<>
<CostAmount className="active-cost-title-orange">£{props.projectValue}</CostAmount>
<PlusVat className="active-cost-title-orange">+VAT</PlusVat>
</>
) : null}
{props.scaler == true && props.starter == true && props.works != true ? (
<>
<CostAmount className="active-cost-title-blue">£{props.projectValue}</CostAmount>
<PlusVat className="active-cost-title-blue">+VAT</PlusVat>
</>
) : null}
{props.starter == true && props.scaler != true && props.works != true ? (
<>
<CostAmount className="active-cost-title-black">£{props.projectValue}</CostAmount>
<PlusVat className="active-cost-title-black">+VAT</PlusVat>
</>
) : null}
</HalfWidth>
</FlexInline>
<FlexInline>
<ThirdWidth>
{props.starterContent.map((block) => (
<CostingBlock className={props.starter == true ? "active-cost-block" : "inactive-cost-block"}>
<CostingSubheading>{block.costingTitle}</CostingSubheading>
<CostingContent>{documentToReactComponents(block.costingCopy.json)}</CostingContent>
</CostingBlock>
))}
</ThirdWidth>
<ThirdWidth>
{props.scalerContent.map((block) => (
<CostingBlock className={props.scaler == true ? "active-cost-block" : "inactive-cost-block"}>
<CostingSubheading>{block.costingTitle}</CostingSubheading>
<CostingContent>{documentToReactComponents(block.costingCopy.json)}</CostingContent>
</CostingBlock>
))}
</ThirdWidth>
<ThirdWidth>
{props.theWorksContent.map((block) => (
<CostingBlock className={props.works == true ? "active-cost-block" : "inactive-cost-block"}>
<CostingSubheading>{block.costingTitle}</CostingSubheading>
<CostingContent>{documentToReactComponents(block.costingCopy.json)}</CostingContent>
</CostingBlock>
))}
</ThirdWidth>
</FlexInline>

I need to subtract the count and update the remaining count

I am using TextField that field data I am adding into the table that works fine what my task is I have one field called Total no of count their I am storing my data count so whenever I add data into the table it will be based on the count, mean like example if I have count 3 then I am able to use count max 3 or if I want to divide that count with a different name that also works only max count I used whatever present in Total no of count or after dividing count with a user name I need to update remaining count in that field or whatever count is present after added into a table showing remaining count when I use all count in one time or add it to the table that works fine mean Total no of count get subtracted with table data count and remain 0 but when I divide that count into 2 or 3 names field mean by 1 by 1 then it will not work properly mean count not get subtracted properly
In this method, I am subtracting and setting the remaining count
const totalRemainingCount =
totalUsers -
Number(
AssignSearchesForm.values.countAssigned ||
teamdata?.map((data) => data.countAssigned)
);
export default function App() {
const [teamdata, setTeamData] = React.useState([]);
const AssignSearchesForm = useFormik({
initialValues: {
selectName: "",
selectAge: "",
location: "",
countAssigned: ""
},
validationSchema,
onSubmit: (values, formikHelper) => {
setTeamData([values, ...teamdata]);
formikHelper.resetForm();
}
});
let filteredArray = nameList.filter(
(e) => !teamdata.some((data) => data.selectName === e.selectName)
);
const handleChange = (e) => {
const selectedName = e.target.value;
const name = nameList.find((data) => data.selectName === selectedName);
const newOptions = Object.values(name).reduce((optionList, key) => {
optionList.push({ value: key, label: key });
return optionList;
}, []);
AssignSearchesForm.setFieldValue("selectName", selectedName);
AssignSearchesForm.setFieldValue("selectAge", newOptions[1]?.value || "");
AssignSearchesForm.setFieldValue("location", newOptions[2]?.value || "");
};
const totalUsers = 3;
const totalRemainingCount =
totalUsers -
Number(
AssignSearchesForm.values.countAssigned ||
teamdata?.map((data) => data.countAssigned)
);
return (
<div className="App">
<Card color="primary" variant="outlined">
<CardHeader
title={
<Typography variant="subtitle1">
Total no of count ={" "}
{totalRemainingCount <= 0 ? 0 : totalRemainingCount}
</Typography>
}
/>
<Divider />
<CardContent>
<Grid container direction="row" spacing={1}>
<Grid item xs={4}>
<TextField
sx={{ minWidth: 185 }}
select
id="outlined-basic"
label="Select Name"
name="selectName"
size="small"
onChange={handleChange}
value={AssignSearchesForm.values.selectName}
error={
AssignSearchesForm.errors.selectName &&
AssignSearchesForm.touched.selectName
}
helperText={
AssignSearchesForm.touched.selectName &&
AssignSearchesForm.errors.selectName
}
>
{filteredArray?.map((option) => (
<MenuItem key={option.selectName} value={option.selectName}>
{option.selectName}
</MenuItem>
))}
</TextField>
</Grid>
<Grid item xs={4}>
<TextField
id="outlined-basic"
label="location"
name="location"
size="small"
{...AssignSearchesForm.getFieldProps("location")}
error={
AssignSearchesForm.touched.location &&
AssignSearchesForm.errors.location
}
helperText={
AssignSearchesForm.touched.location &&
AssignSearchesForm.errors.location
}
/>
</Grid>
<Grid item xs={4}>
<TextField
id="outlined-basic"
label="Select Age"
name="selectAge"
size="small"
{...AssignSearchesForm.getFieldProps("selectAge")}
error={
AssignSearchesForm.errors.selectAge &&
AssignSearchesForm.touched.selectAge
}
helperText={
AssignSearchesForm.touched.selectAge &&
AssignSearchesForm.errors.selectAge
}
/>
</Grid>
<Grid item xs={4}>
<TextField
id="outlined-basic"
label="Count Assign"
name="countAssigned"
size="small"
type="number"
{...AssignSearchesForm.getFieldProps("countAssigned")}
error={
AssignSearchesForm.errors.countAssigned &&
AssignSearchesForm.touched.countAssigned
}
helperText={
AssignSearchesForm.touched.countAssigned &&
AssignSearchesForm.errors.countAssigned
}
/>
</Grid>
<Grid item xs={4}>
<Button
onClick={() => {
AssignSearchesForm.handleSubmit();
}}
variant="contained"
>
Add
</Button>
</Grid>
</Grid>
</CardContent>
</Card>
<Table teamdata={teamdata} />
</div>
);
}
CodeSandBox Link

You need to update your logic for the way you are calculating the count:
const totalRemainingCount =
totalUsers -
(parseInt(
AssignSearchesForm.values.countAssigned
? AssignSearchesForm.values.countAssigned
: 0,
10
) + teamdata?.reduce((partialSum, a) => partialSum + a.countAssigned, 0));
You were getting NaN because the data you were trying to use for subtraction was not the number. Here, I am doing the sum of countAssigned in the table and adding it with the form data that will allow you to get the right value.
Here is an example:https://codesandbox.io/s/preset-ranges-antd-4-19-2-forked-kczd1y?file=/App.js:1838-2095

What I have understood so far is that the Total count is not setting properly. If this is the case then you need to set state of count when you click add button, so that it stores the countAssigned value. Also using the max property in TextField to limit the count to remaining value.
I have edited your codesandbox example.

How to user null in map React JS

I am making an application in React JS. It consists of list of the user for which book is available, taken or requested, but when the book is filtered from the store based on user the line of the invalid user still arrives.
return (
<div>
<h1>List of Books</h1>
{filterValues.map((books) => (
<Segment.Group key={books.id}>
{(books.name === user!.username || books.name === null) &&
(books.requestedBy === user!.username ||
books.requestedBy === null) ? (
<Segment>
<Item.Group>
<Item>
{console.log(books)}
<Item.Image size="tiny" circular src="/assets/books.jpg" />
<Item.Content>
<Item.Header as="a">{books.bookName}</Item.Header>
<Item.Description>
{books.isRequested ? (
<Button
name={books.bookName}
loading={target === books.bookName && submitting}
onClick={(e) => onRequestClick(e, "cancel", books.id)}
color="red"
type="button"
content="Cancel Request"
/>
) : books.isTaken ? (
<div>
<Label basic color="red">
This book is taken By you
</Label>
<Button
name={`return${books.bookName}`}
loading={
target === "return" + books.bookName && submitting
}
color="brown"
onClick={(e) => returnBook(e, books.id)}
type="button"
content="Return this Book"
/>
</div>
) : (
<Button
name={books.bookName}
loading={target === books.bookName && submitting}
onClick={(e) =>
onRequestClick(e, "request", books.id)
}
color="green"
type="button"
content="Request For Book"
/>
)}
</Item.Description>
</Item.Content>
</Item>
</Item.Group>
</Segment>
) : null}
</Segment.Group>
))}
<Segment clearing></Segment>
</div>
);
For example for the list of books i filtered 5 books in map and UI is something like :
How Can i remove those line

Your filtering logic is placed within the .map prototype method itself, so when you are returning null, it's still placed within an empty <Segment.Group> element. Therefore I guess that this element provides the styles which result in rendering those lines.
If you want to truly filter the results and omit any returns for the ones that do not match, it would be best to first call .filter() on your array and omit the null values returned by map:
{
filterValues
.filter(books =>
(books.name === user!.username || books.name === null)
&& (books.requestedBy === user!.username || books.requestedBy === null)
).map(books =>
<Segment.Group key={books.id}>
// Segment items here without the conditional rendering of elements
</Segment.Group>
)
}

I think this is because you are checking under <Segment.Group:
{filterValues.map(books => (
<Segment.Group key={books.id}>
{((books.name === user!.username || books.name === null) && (books.requestedBy === user!.username || books.requestedBy === null))
? /* CREATE THE ITEM */
: null
}
</Segment.Group>
))}
Thus, when it is evaluated to null, it still creates a <Segment.Group> which is shown as empty item in UI.

How to check if element exists in map() React

I have working code
const products = this.state.products.map((product, i) =>
product.fields.company.fields.slug === this.props.match.params.slug ?
<Suspense key={i} fallback={<div>Loading...</div>}>
<ProductListItem id={i} key={i} product={product} />
</Suspense>
: null)
return(
<div className="partner-details" style={partnerD}>
<div className="container-xl">
<Button type="button" className="btn btn-secondary" onClick={this.props.history.goBack}>
<i className="fa fa-arrow-left"></i> Get back
</Button>
<ul>
<div className="product-item">
{products}
</div>
</ul>
</div>
</div>
)
But the problem is if product.fields.company.fields.slug (company.fields.slug) does not exist my code crashes.
How can I add extra ternary operator to check if it product.fields.company exist before execute this product.fields.company.fields.slug === this.props.match.params.slug
Thanks!

if your environment has support for optional chaining you can do this
product?.fields?.company?.fields?.slug === this.props.match.params.slug ? .. : ..
otherwise you need to check that each field is truthy
product && product.fields && product.fields.company && product.fields.company.fields && product.fields.company.fields.slug === this.props.match.params.slug ? .. : ..

Use optional-chaining ( Babel plugin )
product.fields?.company?.fields?.slug
Or make use of the || operator :
(((product.fields || {}).company || {}).fields || {}).slug
And consider wrapping your compoennt in an error boundary so your app won't crash when there's this kind of errors.

In line 2 you can do:
(product && product.fields && product.fields.company && product.fields.company.fields && product.fields.company.fields.slug && this.props && this.props.match && this.props.match.params && this.props.match.params.slug && product.fields.company.fields.slug === this.props.match.params.slug) ?
or use optional chaining.

Delete index using rest/spread operator using JS

I have the following scenario where I need an index deleted.
JS:
this.state = {
rangeValue: this.props.rangeSlider && [
this.props.rangeValue[0],
this.props.rangeValue[1],
this.props.rangeValue[2]
],
};
<Range
defaultValue={
this.props.rangeValue[2] ? [...this.state.rangeValue] : [...this.state.rangeValue] //minus last index in my array (this.props.rangeValue[2])
}
/>

You can remove the last element by using slice
this.state.rangeValue.slice(0,-1);
Your code :
<Range
defaultValue={
this.props.rangeValue[2] ? [...this.state.rangeValue] : this.state.rangeValue.slice(0, -1)
}
/>