Develop Reference

Cannot interact with MUI stepper and change a value

I want to use an MUI stepper to replace a Select component. The select component is used to indicate the status of the document the user is working in (New, In Progress, Complete, etc.). I have managed to display the correct status in the stepper, but I cannot interact with it to move the status forward or back.
This is my stepper file. I am passing the status value through props:
export default function IntakeStatusBar(props) {
const { status } = props;
const classes = useStyles();
const [activeStep, setActiveStep] = useState(0);
const steps = ["New", "In Progress", "Completed"];
useEffect(() => {
if (status === "In Progress") {
setActiveStep(1);
} else if (status === "Completed") {
setActiveStep(2);
} else setActiveStep(0);
}, [status, activeStep]);
const handleStep = (step) => () => {
setActiveStep(step);
};
return (
<div className={classes.root}>
<Stepper activeStep={activeStep} alternativeLabel>
{steps.map((label, index) => (
<Step key={label}>
<StepButton onClick={handleStep(index)}>{label}</StepButton>
</Step>
))}
</Stepper>
</div>
);
}
This is where I call and display the stepper:
export default function IntakeDetails() {
const [details, setDetails] = useState("");
const onTextChange = (e) => {
var id = e.target.id ? e?.target.id : e?.target.name;
var value = e.target.value;
setDetails({ ...details, [id]: value });
}
....
return (
<IntakeStatusBar status={details?.Status} onChange={onTextChange} />
// This is the Select drop down menu I have been using
<TextField
label="Status"
error={requiredField && details?.Status?.length <= 0}
value={details?.Status}
disabled={!(adminRole && isSolutionsTab && details?.Status !== "In Plan")}
select
onChange={onTextChange}
>
{details.StatusList?.map((choice) => {
return (
<MenuItem key={choice} value={choice}>
{choice}
</MenuItem>
);
})}
</TextField>
)
}
This is what the status field looks like in JSON:
{
Status: "New"
}

besides changing this:
<StepButton onClick={() => handleStep(index)}>{label}</StepButton>
you have to change this:
const handleStep = (step) => {
setActiveStep(step);
};
and set Stepper to nonLinear if you want user to click on steps:
<Stepper nonLinear activeStep={activeStep} alternativeLabel>
I also commented out useEffect since I had no idea what its purpose is and it's messing with activeStep state.

TextInput gets unfocused after typing each character

I'm using React to build a form and I'm trying to filter a list with the SearchInput (which works the same as TextInput) located in the child component Header. But everytime I type a character the SearchInput gets unfocused
function index() {
const list = [//data\\]
const [search, setSearch] = useState("");
const [filteredResults, setFilteredResults] = useState([]);
const searchItems = (searchValue) => {
setSearch(searchValue);
if (search !== "") {
const filteredData = partners.filter((item) => {
return Object.values(item)
.join("")
.toLowerCase()
.includes(search.toLowerCase());
});
setFilteredResults(filteredData);
} else {
setFilteredResults(partners);
}
};
const Header = () => (
<Box>
<SearchInput
placeholder="Search"
value={search}
onChange={(e) => searchItems(e.target.value)}
/>
</Box>
);
return (
<Parent
headerContent={<Header />}
>
<Box>
<Table data={search.length > 1 ? filteredResults : list} />
</Box>
</Parent>
);
}
export default index;

Oh, I think I can see the problem now - it's the way you're rendering the <SearchInput /> component. You're inadvertantly creating a new functional component on every render. Either inline the Header directly into the Parent control's headerContent property, or create an entirely separate component:
const Header = ({ search, onSearchChange }) => {
const handleChange = (e) => onSearchChange(e.target.value);
return (
<Box>
<SearchInput
placeholder="Search"
value={search}
onChange={handleChange}
/>
</Box>
);
}
function index() {
// ----- 8< -----
return (
<Parent
headerContent={<Header search={search} onSearchChange={searchItems} />}
>
{/* ... */}
</Parent>
);
}
While you're there, you have a subtle bug with your comparison - it looks like you're searching your partners effectively as a list of strings; but, since you're joining them, if you had partners with the names:
'one'
'two'
You're creating a search string as 'onetwo' - so searching for 'et' would match, even though you don't actually have a partner matching that. You can fix that by just checking each partner individually... something like:
const searchItems = (searchValue) => {
setSearch(searchValue);
if (search !== "") {
const searchValueLower = searchValue.toLowerCase();
const filteredData = partners.filter((item) => {
return Object.values(item)
.some(item => item.toLowerCase().includes(searchValueLower);
});
setFilteredResults(filteredData);
} else {
setFilteredResults(partners);
}
};

ReactJS Change the JSX from onClick function

i have a backend api build on nodejs. in the code the api return some categories array.
i ran .map() function on the array to display the array in the JSX.
after that i added a checkBox to each object inside the array.
so what im trying to do is if the checkbox is true its will added another h1 Element (JSX).
Only to the object i clicked on the checkbox.
i tryied to add "status" props and make it false or true and then catch it with onClick e.target.status?
"YES" : "NO"
also, i tried to added checkBox useState and make it true or false . and its work. but not as i want
its display Yes or No to the all objects and not only to the on i clicked on.
const Category = ({ history }) => {
const dispatch = useDispatch()
const user = useSelector((state) => state.waiter)
const selectedCategory = useSelector((state) => state.selectedTable)
const [currectCategory, setCurrectCategory] = useState([])
const [categoryName, setCategoryName] = useState("")
const [categoryIMG, setCategoryIMG] = useState("not found")
const [checkBox, setCheckBox] = useState("false")
useEffect(() => {
if (!user.name) {
history.push('/login')
} else {
(async () => {
const res = await fetch('http://localhost:1000/categories/' + selectedCategory)
const data = await res.json()
setCurrectCategory(data.CurrectCountry.subcategories.map(sc => sc.name))
setCategoryName(data.CurrectCountry.name)
setCategoryIMG(data.CurrectCountry.img)
})()
}
}, [user])
const goBack = () => {
dispatch({
type: 'ALL_CATEGORIES'
})
history.push('/login')
}
const handleCheck = (e) => {
setCheckBox(e.target.checked.toString())
console.log(e.target.checked)
}
return (
<>
<Button className="LogButton" color="secondary" onClick={goBack}>back</Button>
<div className="SingleCategory">
<h1>{categoryName}</h1>
<ListGroup>
{currectCategory.map(category => {
return (
<Row className="Col-padd" key={category}>
<div>
<InputGroup className="mb-3">
<b className="ItemName"> {category} </b>
<img src={categoryIMG} height="100" width="100" ></img>
<FormCheck id={category} className="Checkbox" onChange={handleCheck}></FormCheck>
{checkBox == "true" ? <b>yes</b> : <b>No</b>}
</InputGroup>
</div>
</Row>
)
})}
</ListGroup>
</div>
</>
)
}
Thanks for help !!

You are only creating a single value for the checkbox. If you want to show for all the checkbox, if you have to track the value for each checkbox shown below,
const [checkBox, setCheckBox] = useState({}); // checkBoxName: value
const handleCheck = (e) => {
setCheckBox((prev) => {...prev, [e.target.name]: e.target.value};
}
{!!checkBox['name'] === true ? <b>yes</b> : <b>No</b>}
//change the attribute according to your implementation.

Your problem is that you're just creating a single value for the checkbox and not separating the individual checkboxes. You could solve this in many different ways, but you would be well served by extracting the code for your checkbox to a separate component.
const Checkbox = ({ category, categoryIMG }) => {
const [isChecked, setIsChecked] = useState(false);
const handleCheck = () => {
setIsChecked((prevState) => !prevState);
};
return (
<Row className="Col-padd" key={category}>
<div>
<InputGroup className="mb-3">
<b className="ItemName"> {category} </b>
<img src={categoryIMG} height="100" width="100"></img>
<FormCheck id={category} className="Checkbox" onChange={handleCheck}></FormCheck>
{isChecked == 'true' ? <b>yes</b> : <b>No</b>}
</InputGroup>
</div>
</Row>
);
};
With a separate checkbox component like above you could instantiate it like this in the map:
<ListGroup>
{currectCategory.map((category) => (
<Checkbox category={category} categoryIMG={categoryIMG} />
))}
</ListGroup>

How to pass a ref for a component using map()

I have a card component that's generated with data from a graphql query and map(). I want to be able to add a ref to the last card generated so I can use the InteserctionObserver API to load more cards when the user scrolls to the last card on the screen, how can I pass a ref to the last card?
this is the code I have
const IndexPage = ({ data }) => {
const [currentIndex, setIndex] = useState(3)
const [element, setElement] = useState(null)
console.log("element", element)
return (
<div className="article-cards">
{data.allStrapiArticle.nodes
.slice(0, currentIndex)
.map((article, index, cards) => {
return (
<Card
id={article.id}
title={article.title}
category={article.categories}
author={article.author.name}
content={article.content}
imgUrl={article.cover.publicURL}
date={article.created_at}
slug={article.slug}
ref={index == currentIndex ? setElement : null}
/>
)
})}
</div>
)

const IndexPage = ({ data }) => {
const [currentIndex, setIndex] = useState(3)
const element = React.useRef(null)
React.useEffect(() => {
console.log("new Element", element.current)
}, [element.current])
return (
<div className="article-cards">
{data.allStrapiArticle.nodes
.slice(0, currentIndex)
.map((article, index, cards) => {
return (
<Card
id={article.id}
title={article.title}
category={article.categories}
author={article.author.name}
content={article.content}
imgUrl={article.cover.publicURL}
date={article.created_at}
slug={article.slug}
ref={index == currentIndex ? element : null}
/>
)
})}
</div>
)

Programmatically focus an element's first eligable child?

I have an accordion-like component, and when the container for a given step is opened, I want the first form element inside to receive focus.
I know that I can programmatically set focus using a ref, but that requires implementation on the individual form elements which is a bit cumbersome in my context.
ie. here's a solution that does what I want:
const Box = ({ isVisible, children }) => {
return (
<div className={isVisible ? "box visible" : "box"}>
{isVisible && children}
</div>
);
};
const Input = ({ autoFocus }) => {
const ref = useRef();
useEffect(() => {
console.log(ref);
if (ref.current && autoFocus) {
ref.current.focus();
}
}, []);
return <input ref={ref} />;
};
export default function App() {
const [active, setActive] = useState(0);
const ref = useRef(null);
const { current } = ref;
useEffect(() => {
console.log(current);
if (current) {
current.focus();
console.log("focus", current);
}
}, [current]);
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
{[0, 1, 2, 3, 4].map((v, i) => (
<button onClick={() => setActive(v)} key={"button" + v}>
{v}
</button>
))}
{[0, 1, 2, 3, 4].map((v, i) => (
<Box isVisible={v === active} key={"box" + v}>
<Input autoFocus />
<Input />
{v}
</Box>
))}
</div>
);
}
CodePen
The problem I have with this solution is that I have to manually implement that autoFocus functionality on my Input, and you can imagine if I also have Dropdown, DateSelector etc it's a bit cumbersome.
What I'd like to do instead is have my Box component do something like this:
const Box = ({ isVisible, children }) => {
const ref = useRef();
useEffect(() => {
if (isVisible && ref.current) {
ref.current.focusChildren();
}
}, [isVisible]);
return (
<div ref={ref} className={isVisible ? "box visible" : "box"}>
{isVisible && children}
</div>
);
};
where we can let the HTML engine decide which the next focusable element is, and focus on that.
Is this possible?

Yes you can write a method to find the first focusable element within your visible box and then set the focus.
Sandbox Example
const findFirstFocusableElement = container => {
return Array.from(container.getElementsByTagName("*")).find(isFocusable);
};
const isFocusable = item => {
if (item.tabIndex < 0) {
return false;
}
switch (item.tagName) {
case "A":
return !!item.href;
case "INPUT":
return item.type !== "hidden" && !item.disabled;
case "SELECT":
case "TEXTAREA":
case "BUTTON":
return !item.disabled;
default:
return false;
}
};
const Box = ({ isVisible, children }) => {
const ref = useRef();
useEffect(() => {
if (isVisible && ref.current) {
const firstFocusableInput = findFirstFocusableElement(ref.current);
firstFocusableInput && firstFocusableInput.focus();
}
}, [isVisible, children]);
return (
<div ref={ref} className={isVisible ? "box visible" : "box"}>
{isVisible && children}
</div>
);
};