We Keep Coding

Change state for each button individually

I have a button to show details of each card in my react project like this. the amount of cards are unknown and it is based on what I get from API.
just like this, I get the data and I'm mapping it:
<div className={styles.contentCardContainer}>
{factorList !== undefined && factorList.length > 0 ? (
factorList.map((list, i) => (
<div key={uuidv4()} className={styles.contentCard}>
<IconButton
color={showListService ? "error" : "success"}
onClick={() => {
setShowlistService((prev) => !prev);
HandleFetchDetails(list.ID);
}}
sx={{
display: "flex",
alignItems: "center",
alignSelf: "flex-start",
}}
>
{showListService ? <RemoveCircle /> : <AddCircle />}
</IconButton>
<section className={styles.eachSection}>
<img src={doctorImage} alt="doctor" />
<p>{list.Doctor}</p>
</section>
<section className={styles.eachSection}>
<img src={calendarImage} alt="doctor" />
<p>
{list.Date}   
{list.Time}
</p>
</section>
<section className={styles.eachSection}>
<img src={RialImage} alt="doctor" />
<p>{list.Payable}  ریال</p>
</section>
<section className={styles.eachSection}>
<img src={discountImage} alt="doctor" />
<p>{list.discount}</p>
</section>
{showListService && (
<DetailsListService listDetails={listDetails} styles={styles} />
)}
</div>
))
) : (
<Alert
variant="filled"
severity="warning"
sx={{ justifyContent: "space-between" }}
>
<p>There's no data</p>
</Alert>
)}
</div>
</div>
as you can see, I have IconButton element that I mapped it so each element have this button. but there's a problem.
I just have one state.
just like this :
const [showListService, setShowlistService] = React.useState(false);
since the amount cards I will receive is unknown. I can't define multiple states, because I don't know how many I should define. this is a bad practice too.
so whenever I click on IconButton, state changes for ALL buttons. how can I make it work individually.
change state for just a button in that specific element

Create a component for the cards and each card can keep the state:
factorList.map((factor, index) => {
return <Card key={index} factor={factor} />;
});
const Card = ({ factor }) => {
const [state, setState] = useState(false);
return <div>Your card stuff here</div>;
};

Add a button to react material-table toolbar

I want to add a button to material-table toolbar. it doesnt do anything relevant to the table. it just opens a modal with some information
I want to add a button called "quotations" to the left side of the "add item" button.
Sandbox code: https://codesandbox.io/embed/charming-yalow-4pnk4?fontsize=14&hidenavigation=1&theme=dark

As Will Evers mentioned, it's possible to add whatever is necessary to Toolbar of the MaterialTable component by using Toolbar prop :
Toolbar: (props) => (
<div
style={{
display: "flex",
justifyContent: "flex-end",
alignItems: "center"
}}
>
<Button
style={{ height: "fit-content" }}
color="primary"
variant="contained"
>
Quotations
</Button>
<div style={{ width: "13rem" }}>
<MTableToolbar {...props} />
</div>
</div>
),
Working Demo

Per the docs, it looks like you need to override the Toolbar component of your table and you should be able to add what ever you want above the column headers:
https://material-table.com/#/docs/features/component-overriding
https://i.stack.imgur.com/J0mqf.png

Use this prop in the component tag
renderTopToolbarCustomActions={() => (
<Button
variant="contained"
color="primary"
size="large"
onClick={() => console.log('something')}
>
Quotations
</Button>
)}

Can't change color of Card Title text in React Native Paper

I'm just getting started with React Native and using Paper for UI elements. I'm using a card layout for my current screen:
{cardData.map((card, index) => {
return(
<Card key={index}>
<Card.Title title="Card Title" subtitle="Subtitle" style={styles.cardHeader} />
<Card.Content>
<Paragraph>{card.content}</Paragraph>
</Card.Content>
<Card.Cover source={{ uri: 'https://picsum.photos/700' }} />
<Card.Actions>
<Button>Cancel</Button>
<Button>Ok</Button>
</Card.Actions>
</Card>
)
})}
I'm trying to change the color of the title section to green, an the color of the text to white. So I have the following style:
const styles = StyleSheet.create({
cardHeader: {
backgroundColor: '#00bc8c',
color: '#ffffff'
}
});
Strangely the background color changes as expected, but the text color remains black. Could anyone suggest why this may be the case?

You can use titleStyle for styling title react-native-paper

As suggested by Nooruddin, but with a code sample:
titleStyle={{ color: "#f00" }}

How to place two icons in a button

I am trying to place two icons one is related to wordDocument and other is related to download icon on and button but one icon is overriding another icon, this is the code:
import { FileWordOutlined, DownloadOutlined } from '#ant-design/icons';
return (
<Fragment>
<Button
type="primary"
style={{ width: '30%' }}
onClick={() => {
authProvider.getIdToken().then(token => {
downloadFile(
`${process.env.REACT_APP_API_URL}/api/Projects/${projectNumber}`,
token.idToken.rawIdToken
);
});
}}
icon={((<FileWordOutlined />), (<DownloadOutlined />))}
size="small"
>
Basis of Design
</Button>
</Fragment>
);
and the button image is looking like this right now
I am looking to place icon <FileWordOutlined /> on the right side of the text Basis of Design and <DownloadOutlined /> is on the left side of the text.
Could anyone please let me know is there any way to achieve this?

The icon props take only one component. So you won't be able to pass two-component there.
There are two ways to get 2 icons.
Remove the icon prop and use the 2 icon Component,for ex,<FileWordOutlined />, <DownloadOutlined /> as children to the Button prop.
<Button type="primary">
<FileWordOutlined />
Basis of Design
<DownloadOutlined />
</Button>
If you want to use the icon prop you use it like this:
<Button
type="primary"
icon={<FileWordOutlined />}
size="small"
>
Basis of Design
<DownloadOutlined />
</Button>

What you are doing isn't working because you are setting icon to the returned value of ((<FileWordOutlined />), (<DownloadOutlined />)), which is <DownloadOutlined />.
You can omit icon and put the icons and the button text inside Button instead:
<Button
type="primary"
size="small"
>
<DownloadOutlined />
Basis of Design
<FileWordOutlined />
</Button>
demo

If you want to get 2 icons then create icon prop like this:
<Button icon={your primary icon}>
{text}
{extra icon}
</Button>
So the Element would look like
<My Button
icon={<icon name/>}
text={text}
extra icon={<extra icon name/>}
/>

React set draggable antd modal

I'm trying to add a antd modal with drag&drop features.
import React, { Component } from "react";
import Draggable from "react-draggable";
import { Modal } from 'antd';
import 'antd/dist/antd.css';
export default class App extends Component {
state = {
disabled: false
};
render = () => {
const { disabled } = this.state;
return (
<div className="container">
<Modal visible>
<Draggable>
<div>
<h4 style={{ height: 20, userSelect: "none" }}>
{"Drag Me"}
</h4>
<textarea disabled={!disabled} className="uk-textarea" />
<br />
</div>
</Draggable>
</Modal>
</div>
);
};
}
Here's my sanbox code https://codesandbox.io/s/small-currying-j3emq, but it seems that react-draggable in ant modal element doesn't work, probably if I can set the element "ant-modal-content" as draggable element this works.
Does anyone know if it is possible to put the draggable element via props in react-draggable?
I am also available to change the package for drag & drop, I just need to be able to drag a antd modal

Just place your <Draggable> inside your <Modal> and not the opposite
return (
<div className="container">
<Modal visible>
<Draggable>
<div>
<h4 style={{ height: 20, userSelect: "none" }}>{"Drag Me"}</h4>
<textarea disabled={!disabled} className="uk-textarea" />
<br />
</div>
</Draggable>
</Modal>
</div>
);