We Keep Coding

React update array prop from child to parent

Hello I am struggling to properly update my state from my child component to my parent.
Basically I am trying to set the current state to true onclick.
This is my parent component:
export default function Layout({ children }: Props) {
const [navigation, setNavigation] = useState([
{ name: 'Dashboard', href: '/', icon: HomeIcon, current: true },
{ name: 'Create Fact', href: '/facts/create', icon: UsersIcon, current: false },
{ name: 'Documents', href: '/documents', icon: InboxIcon, current: false }
])
return (
<>
<Sidebar navigation={navigation} setNavigation={setNavigation} />
This is my child Component (Sidebar)
type Props = {
navigation: Array<{
name: string
href: string
icon: any
current: boolean
}>
setNavigation: (
navigation: Array<{
name: string
href: string
icon: any
current: boolean
}>
) => void
}
const Sidebar = ({navigation, setNavigation}: Props) => {
const router = useRouter()
const toggleNavigation = (name: string) => {
// todo: Here I would like to properly update the state with the current selected navigation item (current)
const newNavigation = navigation.map(nav => {
if (nav.name === name) {
nav.current = true
return nav
}
})
}
return (
<nav className="flex-1 px-2 pb-4 space-y-1">
{navigation.map(item => (
<span
onClick={() => toggleNavigation(item.name)}

There are three problems:
You never call setNavigation with your new array.
You don't clear current on the formerly-current item.
Although you're creating a new array, you're reusing the objects within it, even when you change them, which is against the Do Not Modify State Directly rule.
To fix all three (see *** comments):
const toggleNavigation = (name: string) => {
const newNavigation = navigation.map(nav => {
if (nav.name === name) {
// *** #3 Create a *new* object with the updated state
nav = {...nav, current: true};
} else if (nav.current) { // *** #2 make the old current no longer current
nav = {...nav, current: false};
}
return nav;
});
// *** #1 Do the call to set the navigation
setNavigation(newNavigation);
};
Separately, though, I would suggest separating navigation out into two things:
The set of navigation objects.
The name of the current navigation item.
Then setting the navigation item is just setting a new string, not creating a whole new array with an updated object in it.

T.J. Crowder's solution and explanation are great.
Additionally, you can write that logic in a shorter syntax. Just a preference.
const newNavigation = navigation.map(nav => {
return nav.name === name
? { ...nav, current: true }
: { ...nav, current: false }
})

ReactJS How to use Refs on components rendered dinamically by another render function to focus elements?

I have a class component that Renders a list of elements and I need to focus them when an event occurs.
Here is an example code
class page extends React.Component {
state = {
items: [array of objects]
}
renderList = () => {
return this.state.items.map(i => <button>{i.somekey}</button>)
}
focusElement = (someitem) => {
//Focus some item rendered by renderList()
}
render(){
return(
<div>
{this.renderList()}
<button onClick={() => focusElement(thatElement)}>
</div>
)
}
}
I know that I need to use refs but I tried several ways to do that and I couldn't set those refs properly.
Can someone help me?

you should use the createRefmethod of each button that you would like to focus, also you have to pass this ref to the focusElement method that you have created:
const myList = [
{ id: 0, label: "label0" },
{ id: 1, label: "label1" },
{ id: 2, label: "label2" },
{ id: 3, label: "label3" },
{ id: 4, label: "label4" },
{ id: 5, label: "label5" }
];
export default class App extends React.Component {
state = {
items: myList,
//This is the list of refs that will help you pick any item that ou want to focus
myButtonsRef: myList.map(i => React.createRef(i.label))
};
// Here you create a ref for each button
renderList = () => {
return this.state.items.map(i => (
<button key={i.id} ref={this.state.myButtonsRef[i.id]}>
{i.label}
</button>
));
};
//Here you pass the ref as an argument and just focus it
focusElement = item => {
item.current.focus();
};
render() {
return (
<div>
{this.renderList()}
<button
onClick={() => {
//Here you are able to focus any item that you want based on the ref in the state
this.focusElement(this.state.myButtonsRef[0]);
}}
>
Focus the item 0
</button>
</div>
);
}
}
Here is a sandbox if you want to play with the code

Rendering the navigation list from an array based on different label on toggle mode

I have a header component where I need to render three buttons, so every three buttons have three props. One is the class name, click handler and text.
So out of three buttons, two buttons act as a toggle button, so based on the click the text should change.
See the below code:
class App extends Component(){
state = {
navigationList: [{
text: 'Signout',
onClickHandler: this.signoutHandler,
customClassName: 'buttonStyle'
}, {
text: this.state.isStudents ? 'Students' : 'Teachers',
onClickHandler: this.viewMode,
customClassName: 'buttonStyle'
}, {
text: this.state.activeWay ? 'Active On' : 'Active Hidden',
onClickHandler: this.activeWay,
customClassName: 'buttonStyle'
}]
}
signoutHandler = () => {
// some functionality
}
viewMode = () => {
this.setState({
isStudents: !this.state.isStudents
})
}
activeWay = () => {
this.setState({
activeWay: !this.state.activeWay
})
}
render(){
return (
<Header navigationList={this.state.navigationList}/>
)
}
}
const Header = ({navigationList}) => {
return (
<>
{navigationList && navigationList.map(({text, onClickHandler, customClassName}) => {
return(
<button
onClick={onClickHandler}
className={customClassName}
>
{text}
</button>
)
})}
</>
)
}
The other way is I can pass all the props one by one and instead of an array I can write three button elements render it, but I am thinking to have an array and render using a map.
So which method is better, the problem that I am facing is if use the array. map render
the approach I need to set the initial value as a variable outside and how can I set the state.
And I am getting the onClick method is undefined, is it because the function is not attached to the state navigation list array.
Update
I declared the functions above the state so it was able to call the function.
So in JS, before the state is declared in the memory the functions should be hoisted isn't.

class App extends React.Component {
constructor(props){
super();
this.state = {
isStudents:false,
activeWay:false,
}
}
createList(){
return [{
text: 'Signout',
onClickHandler: this.signoutHandler.bind(this),
customClassName: 'buttonStyle'
}, {
text: this.state.isStudents ? 'Students' : 'Teachers',
onClickHandler: this.viewMode.bind(this),
customClassName: 'buttonStyle'
}, {
text: this.state.activeWay ? 'Active On' : 'Active Hidden',
onClickHandler: this.activeWay.bind(this),
customClassName: 'buttonStyle'
}];
}
signoutHandler(){
}
viewMode(){
this.setState({
isStudents: !this.state.isStudents
})
}
activeWay(){
this.setState({
activeWay: !this.state.activeWay
})
}
render(){
return (
<div>
<div>ddd</div>
<Header navigationList={this.createList()} />
</div>
)
}
}
const Header = ({navigationList}) => {
console.log(navigationList);
return (
<div>
{navigationList && navigationList.map(({text, onClickHandler, customClassName}) => {
return(
<button
onClick={onClickHandler}
className={customClassName}
>
{text}
</button>
)
})}
</div>
)
}
ReactDOM.render(<App />, document.querySelector("#app"))
https://jsfiddle.net/luk17/en9h1bpr/

Ok I will try to explain, If you see you are using function expressions in your class and as far as hoisting is concerned in JavaScript, functions expressions are not hoisted in JS only function declarations are hoisted, function expressions are treated as variables in JS.
Now for your case you don't have to shift your functions above the state, you can simply use constructor for initializing state as
constructor(props) {
super(props);
this.state = {
isStudents: false,
activeWay: false,
navigationList: [
{
text: "Signout",
onClickHandler: this.signoutHandler,
customClassName: "buttonStyle"
},
{
text: "Teachers",
onClickHandler: this.viewMode,
customClassName: "buttonStyle"
},
{
text: "Active Hidden",
onClickHandler: this.activeWay,
customClassName: "buttonStyle"
}
]
};
}
Now you will have your handlers available as it is
Sandbox with some modification just to show
EDIT:
You can have default text for buttons and change it when clicking,
Sandbox updated
Hope it helps

React - How To Compare Props Between Separate Components

How can I compare if the props between two separate components have the same value?
1- Is what I'm seeking doable?
2- If not, how else could I accomplish the ask below:
The story:
I have an array of car objects.
Each car's name is displayed as <li /> on a <CarList /> component.
Upon click on each <li/> the car's color is revealed
I have a <Question /> component that renders: "What car is (random color here)"?
UI change:
How could I write a method that:
Checks if the props.color of <CarList /> === the props.color of <Question />
Then it fires a UI change such as:
onClick: If the car's color matches the question's color: change the <li /> to green (ie: background-color), else change it to red.
I'm struggling (wondering if it's possible) to compare props from different components + writing a method that checks and executes the UI change above.
This is the code reflecting the explanation above: Also here's the sandbox
// Garage
export default class Garage extends Component {
state = {
cars: [
{ name: "Ferrari", color: "red", id: 1 },
{ name: "Porsche", color: "black", id: 2 },
{ name: "lamborghini", color: "green", id: 3 },
{ name: "McLaren", color: "silver", id: 4 },
{ name: "Tesla", color: "yellow", id: 5 }
]
};
handleShuffle = () => {
this.setState({
cars: [...this.state.cars.sort(() => Math.random() - 0.5)]
});
};
render() {
const { cars } = this.state;
const car = cars.map(car => (
<CarList key={car.id} make={car.name} color={car.color} />
));
const guess = cars
.slice(2, 3)
.map(car => <Question key={car.id} color={car.color} />);
return (
<>
<div>{guess}</div>
<button onClick={this.handleShuffle}>load color</button>
<ul>{car}</ul>
</>
);
}
}
// CarList
class CarList extends Component {
state = {
show: false
};
handleShow = () => {
this.setState({ show: true });
console.log(this.props);
// check for props equality here
//desired result for <li /> would be
// className={ correctColor ? 'green' : 'red'}
};
render() {
console.log("car color props:", this.props.color);
const { make, color } = this.props;
const { show } = this.state;
return (
<li onClick={this.handleShow}>
{make}
<span className={show ? "show" : "hide"}>{color}</span>
</li>
);
}
}
// Question
const Question = ({ color }) =>
console.log("question color prop:", color) || <h1>What car is {color}</h1>;

Yes, you can pass the correct color to the CarList component or the flag whether the CarList is a correct one. Check my sandbox.
https://codesandbox.io/s/92xnwpyq6p
Basically we can add isCorrect prop to CarList which has value of correctCar.color === car.color and we use it to determine whether we should render it green or red.

Theres many ways to do this but the simplest is to send the color in the question down to the car component.
https://codesandbox.io/s/my4wmn427x

onClick event on stateless components controlling a prop on that Component

I have a stateless component called EmailItem: I want to be able to give it a new prop via some function when I click on it.
<EmailItem key={i} onClick={// onClick function} emailData={email} read={false} />
I want the value of read prop to change to true when the EmailItem is clicked.
I understand this can be done by making EmailItem a stateful component; however, it is an iterable component and from my understanding adding state where you don't NEED it, is bad. Correct me if I'm wrong.
I am confused about the content of the function I would use since e.target and refs will not work.
This read prop will change the class of an item in the stateless component.
const EmailItem = (props) => {
let readClass = props.emailData.read ? '--read' : ''
return (
<div onClick={props.onClick} className='email'>
<div className={'email__read' + readClass} />
<div className='email__leftside'>
<div className='email__from'>{props.emailData.from}</div>
<div className='email__subject'>{props.emailData.subject}</div>
<div className={'email__body'}>{props.emailData.body}</div>
</div>
<div className='email__rightside'>
<div className='email__date'>{props.emailData.date}</div>
<div className='email__time'>{props.emailData.time}</div>
</div>
</div>
)
}
The email__read className is an indicator of whether the email has been read or not

From what I understood, You can pass function(onClick) from parent to child component and bind emaildata to that function. ES6 arrow function syntax takes care of parameter binding and you can get emailData(which was clicked) in parent.
Try out following example(sorry for no css)
class Inbox extends React.Component {
constructor(props) {
super(props)
this.state = {
emails: [
{ read: false, from: "aaa", to: "aaato", subject: "aaasubject", body: "aaabody", date: "aaadate", time: "aaatime" },
{ read: true, from: "bbb", to: "bbbto", subject: "bbbsubject", body: "bbbbody", date: "bbbdate", time: "bbbtime" },
{ read: false, from: "aaa", to: "cccto", subject: "cccsubject", body: "cccbody", date: "cccdate", time: "ccctime" },
{ read: false, from: "ddd", to: "dddto", subject: "dddsubject", body: "dddbody", date: "ddddate", time: "dddtime" },
]
}
}
handleClick(index, ele) {
// ele is emaildata, do anything you want
var newEmails = this.state.emails
newEmails[index].read = true
this.setState({
emails: newEmails
})
}
render() {
return (
<div>
<p>Emails</p>
{
this.state.emails.map((e, i) => {
return <EmailItem emailData={e} key={i} onClick={() => { this.handleClick(i, e) }} />
})
}
</div>
)
}
}
const EmailItem = (props) => {
let readClass = props.emailData.read ? '--read' : '--unread'
return (
<div onClick={props.onClick} className='email'>
<div className={'email__read' + readClass} />
<div className='email__leftside'>
<p>{readClass}</p>
<div className='email__from'>From {props.emailData.from}</div>
<div className='email__subject'>To {props.emailData.subject}</div>
<div className={'email__body'}>Body {props.emailData.body}</div>
</div>
<div className='email__rightside'>
<div className='email__date'>Date {props.emailData.date}</div>
<div className='email__time'>Time {props.emailData.time}</div>
</div>
<p>---------------------</p>
</div>
)
}

What you need to do to change your props is to change the state. It doesn't matter that the state doesn't live in this component. You can pass callback from your parent component and than call this callback inside your stateless component and change state in your parent component.
Note: State doesn't to be in the parent. It can be higher up.
This should help you: https://facebook.github.io/react/docs/lifting-state-up.html
I hope this is helpful for you.

May be this link can help you i jut gave its answer there
How to pass function as props in React?