I wrote an object style and I was calling it in style of any element.
It was cool tell i wanted to edit one style value of some element, so I tried to change it like
onClick={{cardStyle.li.backgroundColor : "black }}
But that gave me a read only error, so I put the cardStyle object in state in order using setState, and now when i try to change anyvalue using setState, it seems that it only puts that value and deleted everything from it
This is the code:
import React from "react";
export default class CardInfo extends React.Component
{
constructor(props){
super(props);
this.state = { cardStyle : {
ul : {
width : '80%',
margin : '5% 10%',
listStyleType : "none",
},
li :{
width : "30%",
border : " 4px solid rgb(0, 0, 0 , 0.6) ",
borderRadius : "7%",
textAlign : "center",
paddingTop : "3%",
marginRight : '1%',
float : 'left',
backgroundColor : this.props.Fname === "MUHAMMAD" ? "rgb(255, 10, 92 , .7)" : "white",
},
img : {
width : " 80%",
borderRadius : "7%",
},
on : {backgroundColor : "black"}
}}
}
render()
{
return <ul style={this.state.cardStyle.ul}>
<li style={this.state.cardStyle.li}
onClick={() =>this.setState({cardStyle:{li:{backgroundColor : "grey"}}})} >
<img style={this.state.cardStyle.img} src={this.props.img} alt="lilpic" />
<h2>{this.props.Fname}</h2>
<p>{this.props.quetes}</p>
<p>{this.props.phone}</p>
</li>
</ul>
}
}
You are changing state and overriding it with new values, instead you should override the property you want and give rest of the properties as well. So replace your on click this.setState with
this.setState({cardStyle:{ ...this.state.cardStyle, li:{backgroundColor : "grey"}}})} >
Related
I am QML newbie. I am trying to understand how to access selected delegates in ListView
For instance I have the following main.qml
import QtQuick 2.15
import QtQuick.Controls 2.5
import QtQuick.Window 2.15
Window {
width : 640
height : 700
visible : true
title : qsTr("Hello World")
Rectangle {
id : rect_A
anchors.left : parent.left
width : 300
height : 500
border.color : "black"
border.width : 2
ListView {
id : view_A
anchors.fill : parent
spacing : 10
model : 5
delegate : comp_1
}
}
Rectangle {
id : rect_B
anchors.right : parent.right
width : 300
height : 300
border.color : "black"
border.width : 2
ListView {
id : view_B
anchors.fill : parent
spacing : 10
model : 5
clip : true
delegate : comp_1
}
}
Component {
id : comp_1
Row {
id : row_1
spacing : 10
CheckBox {
id : checkBox
Text {
text : index
}
}
}
}
}
I would like to achieve the following behavior: when I check or uncheck the checkbox on the left, the appropriate checkbox on the right does the same.
I'm trying to understand how to address selected delegates and change their properties.
Could you help me please? I have a feeling that this should be easy but I am missing something fundamental.
This is usually done via a model defined in C++ / Python, with a role that tracks the checked state.
here is a simple example with ListModel:
import QtQuick
import QtQuick.Controls
import QtQml.Models
Item{
ListModel{id: checkable_model
ListElement {
checked: false
}
ListElement {
checked: false
}
ListElement {
checked: false
}
ListElement {
checked: false
}
}
Rectangle {
id : rect_A
anchors.left : parent.left
width : 300
height : 500
border.color : "black"
border.width : 2
ListView {
id : view_A
anchors.fill : parent
spacing : 10
model : checkable_model
delegate : MyDelegate{}
}
}
Rectangle {
id : rect_B
anchors.right : parent.right
width : 300
height : 300
border.color : "black"
border.width : 2
ListView {
id : view_B
anchors.fill : parent
spacing : 10
model : checkable_model
clip : true
delegate : MyDelegate{}
}
}
}
// MyDelegate.qml
import QtQuick
import QtQuick.Controls
Row {
required property var model
id : row_1
spacing : 10
CheckBox {
id : checkBox
checked: model.checked
onCheckedChanged:{model.checked = checked}
Text {
text : model.index
}
}
}
You can try it here
I want to conditionally change the error color (warning orange and error red). I don't want to use useStyle because it's deprecated in mui5. Here is my code :
import { TextField as MuiTextField } from "#mui/material";
const TextField = styled(MuiTextField)(({ theme, isWarning }) => ({
"& .MuiOutlinedInput-root": {
"&.Mui-error": {
"& fieldset": {
borderColor: isWarning
? theme.palette.warning.main
: theme.palette.error.main,
},
"&:hover fieldset": {
borderColor: isWarning
? theme.palette.warning.main
: theme.palette.error.main,
},
"&.Mui-focused fieldset": {
borderColor: isWarning
? theme.palette.warning.main
: theme.palette.error.main,
},
},
},
}));
Then I use it like this :
<TextField
label="Description"
name="description"
value={this.state.description}
onChange={this.handleChange}
error={Boolean(errors?.description)}
isWarning={this.state.isWarning}
/>
It works but I got this error in the console :
Warning: React does not recognize the isWarning prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase iswarning instead. If you accidentally passed it from a parent component, remove it from the DOM element.
So I tried to use lowercase but I got this error :
Received true for a non-boolean attribute iswarning.
How can I do to remove this log ? Maybe there is another to change the color ?
Instead of using a style, you can change the color of the TextField to get the same effect. Make sure error is set to false or it will override the color to red.
<TextField
...
error={Boolean(errors?.description) && !this.state.isWarning}
color={this.state.isWarning ? "warning" : undefined}
/>
The color property docs can be found here.
I am making a single search component for all the different places into my application.
And to each component I am passing a prop named search : string to check for the truthfulness of that particular component, so as to specify styles for the same.
I know I could use classNames instead of sx prop, but if I pass the sx prop which contain where every single property received the function , which in turn behaves accordingly to the type of which component is active for that moment. ( or way could say , which component has active), this is because my search bar for homepage has different styling then the search bar for items page.
Here's is my code
import { SearchSharp } from "#mui/icons-material";
import { alpha, FormControl, IconButton, InputAdornment, InputBase, makeStyles, styled, SxProps, TextField, Theme, useTheme } from "#mui/material";
import { Fragment } from "react";
import { useThemeContext } from "../../css/ThemeSettings";
import { useAppDispatch, useAppSelector } from "../../Redux/reduxStore";
import { setSearchTerm } from "./jobSlice";
interface Props {
search? : string;
}
export default function SearchAll ( props : Props ) {
// using redux
const { searchTerm } = useAppSelector ( state => state.jobs);
const dispatch = useAppDispatch();
// using theme
const { darkMode } = useThemeContext();
// background color // this is my function to trigger different backgroundColor based on which component is active...
const setBackgroundColor = () => {
switch ( props.search ) {
case 'home' : return darkMode ? 'rgba(0, 0, 0, 0.54)' : 'rgba(238, 240, 243, 1)';
case 'items' : return 'rgba( 255, 255, 255, 1 )';
}};
// similar to the above, i want to make other functions that I could pass into color, // width, position property etc.
// making and using styles
const searchStyles = {
position : 'relative',
borderRadius : 20,
color : 'text.secondary',
width : props.search === 'home' ? '500px' : '100%',
backgroundColor : setBackgroundColor(),
"& .MuiOutlinedInput-root": {
"& > fieldset": { border : "none" } },
'&:hover': {
backgroundColor : props.search === 'items' ? 'none'
: darkMode ? 'rgba(0, 0, 0, 0.54)' : 'rgba(238, 240, 243, 1)',
},
};
return (
<Fragment>
<TextField
variant = {'outlined'}
size = {'small'}
sx = {searchStyles} // i am getting an error here
placeholder = {"Search…"}
fullWidth = { props.search === 'items' ? true : false }
autoFocus = { true } />
</Fragment>
)
}
below is the error which I am getting when hovering on 'sx' keyword, as it is the thing which is throwing the error ...
The system prop that allows defining system overrides as well as additional CSS styles.
Type '{ position: string; borderRadius: number; color: string; width: string; backgroundColor: string | undefined; "& .MuiOutlinedInput-root": { "& > fieldset": { border: string; }; }; '&:hover': { backgroundColor: string; }; }' is not assignable to type 'SxProps<Theme> | undefined'.
Type '{ position: string; borderRadius: number; color: string; width: string; backgroundColor: string | undefined; "& .MuiOutlinedInput-root": { "& > fieldset": { border: string; }; }; '&:hover': { backgroundColor: string; }; }' is not assignable to type 'CSSSelectorObjectOrCssVariables<Theme>'.
Property 'backgroundColor' is incompatible with index signature.
Type 'string | undefined' is not assignable to type 'SystemStyleObject<Theme> | CssVariableType | ((theme: Theme) => string | number | SystemStyleObject<Theme>)'.
Type 'undefined' is not assignable to type 'SystemStyleObject<Theme> | CssVariableType | ((theme: Theme) => string | number |
Is there any way, we could use to pass functions ( which in turn return string) to these individual sx props?
or is there any another way to achieve this?
your setBackgroundColor you use for setting backgroundColor in your searchStyles not compatible with the property backgroundColor (Property 'backgroundColor' is incompatible with index signature.) as is could possible return undefined while backgroundColor requires a "SystemStyleObject | CssVariableType | ((theme: Theme) => string | number | SystemStyleObject)" and does not accept undefined as a valid type
You should be able to fix this by adding a default case to your setBackGroundColor method
const setBackgroundColor = () => {
switch ( props.search ) {
case 'home': return darkMode ? 'rgba(0, 0, 0, 0.54)' : 'rgba(238, 240, 243, 1)';
case 'items': return 'rgba( 255, 255, 255, 1 )';
default: return 'none'
}};
I have a Cell component and when I click on it I want some popup window named ChangeParamWindow to appear. ChangeParamWindow has 2 buttons and if any of them was clicked I want to refresh value in the Cell to refresh from the popup input & ChangeParamWindow change its display to none if it is block (for hiding block). It hides itself succesfully only one time, but never again. I am pretty sure that using prevState somehow wrong, but could abybody tell me what I am doing wrong?
class ChangeParamWindow extends React.Component {
constructor(props) {
super(props)
this.onClose = this.onClose.bind(this);
this.state = {
placeholder: "Param...",
maxlength : 100,
inputType : "text",
type : "any", // number or string. (for restritions)
value : null,
outline : "none",
position : "absolute",
display : "block"
}
this.inputId = "small-window-input-id"
}
onClose(e) {
e.preventDefault()
let value = document.getElementById(this.inputId).value
console.log("new value is", value)
this.setState(prevState => ({
display : (prevState.display == "none") ? "display" : "none", // TODO ???
value : value
}))
}
render(){
return (
<div
style={{
display : this.state.display,
position : this.state.position,
outline : this.state.outline,
left : this.props.x,
top : this.props.y
}}
>
<input
id={this.inputId}
maxLength={this.state.maxlength}
type={this.state.inputType}
placeholder={this.state.placeholder}
/>
<input
onClick={ this.onClose }
type="submit"
value="ok"
/>
<input
onClick={this.onClose }
type="submit"
value="cancel"
/>
</div>
)
}
}
class Cell extends React.Component {
constructor(props) {
super(props)
this.state = {
value : null,
type : "any",
noValue : "..."
}
}
openChangeParamWindow(x, y) {
ReactDOM.render(
<ChangeParamWindow
x={x}
y={y}
/>,
document.getElementById("change-param-window")
)
}
isNumberValid() {
}
isStringValid() {
}
render() {
let value = (this.state.value == null) ? this.state.noValue : this.state.value;
return (
<div
className="cell"
onClick={event => {
this.openChangeParamWindow(event.clientX, event.clientY)
}}
>
{value}
</div>
);
}
}
ReactDOM.render(
<Cell />,
document.getElementById('init-cell')
);
.cell {
background:grey;
border-radius: 7px;
border:0;
transition: 0.25s;
width:40px;
height:25px;
text-align: center;
padding-top:5px;
}
.cell:hover {
cursor: pointer;
background:white;
}
<script src="https://unpkg.com/react#17/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom#17/umd/react-dom.production.min.js"></script>
<div id="change-param-window"></div>
<div id="init-cell"></div>
You almost certainly do not want to be using ReactDOM.render twice here. You should be rendering your app's root component with ReactDOM.render, but after that, if you want to render something outside the hierarchy of your component tree, you'll want to use React Portals. The docs here should sort you out. If you're still in need of help, I can dig deeper.
I have a react-table, each row has the arrow that when clicked expands into a sub-component of another react-table.
I want to change the color of that arrow as well as move it to the right side of the column if possible. Does anyone know if that's possible and how to go about doing that. I've attached a pic of the code for the table as well as how it looks rendered currently. Thanks for any help!
Code example
It's possible by using a Custom Expander. You can just define your column like this:
columns: [
// other columns...,
{
expander: true,
Header: () => <strong>More</strong>,
width: 65,
Expander: ({ isExpanded, ...rest }) =>
<div>
{isExpanded
? <span>⊙</span>
: <span>⊕</span>}
</div>,
style: {
cursor: "pointer",
fontSize: 25,
padding: "0",
textAlign: "center",
userSelect: "none",
color: "green"
},
Footer: () => <span>♥</span>
}
]