<!-- begin snippet: js hide: false console: true babel: true -->
<!-- language: lang-js -->
const {useMemo, useState, useRef} = React
const DATA = {
1:{name: 'John', children: ['Smith','Mary','Chris']},
2:{name:'Ama', children: ['Natalia','Obama']}
};
const List = ()=>{
const generateList = useMemo(() => {
let arr = [];
for (let i in DATA) {
arr.push(<Item key={i} id={i} {...DATA[i]} /> );
}
return arr;
}, [DATA])
return (
<ul>{generateList}</ul>
);
}
const Item = (props) =>{
const [isShow, setIsShow] = useState(false);
const [name, setName] = useState(props.name);
const toggle = () => setIsShow(!isShow)
const handleClick = (e,name) => {
e.stopPropagation();
setName(name);
toggle();
}
return(
<React.Fragment>
<li onClick={toggle}>
<p>{props.name}</p>
{props.children.map((i,j)=>(<button key={j} onClick={(e)=>handleClick(e,i)} >{i}</button>))}
</li>
<Modal visible={isShow} toggle={toggle} name={name}/>
</React.Fragment>
);
}
const Modal = (props) => {
const prevName = useRef(props.name);
const [name, setName] = useState(props.name);
if(prevName.current !== props.name){
prevName.current=name;
setName(props.name)
};
return props.visible ? ReactDOM.createPortal(
<React.Fragment>
<div className="dimmer"/>
<div className="modal">
<input type="text" value={name} onChange={(e)=>setName(e.target.value)} />
<button onClick={props.toggle}>close</button>
</div>
</React.Fragment>, document.getElementById("modal")
) : null
}
ReactDOM.render(
<List/>,document.getElementById('root')
)
<!-- language: lang-css -->
.dimmer{
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: rgba(0,0,0,0.16);
}
.modal{
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background-color: white;
width: 200px;
height: 120px;
}
li:hover{ background-color: #f0f0f0; cursor: pointer; }
<!-- language: lang-html -->
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"></div>
<div id="modal"></div>
<!-- end snippet -->
I solved it using `useRef()`.
const Modal = (props) => {
const prevName = useRef(props.name);
const [name, setName] = useState(props.name);
if(prevName.current !== props.name){
prevName.current=name;
setName(props.name)
};
return props.visible ? ReactDOM.createPortal(
<React.Fragment>
<div className="dimmer"/>
<div className="modal">
<input type="text" value={name} onChange={(e)=>setName(e.target.value)} />
<button onClick={props.toggle}>close</button>
</div>
</React.Fragment>, document.getElementById("modal")
) : null
}
Create a generator of button/label pairs with their local state and step. Generate the buttons and labels, and render them:
<!-- begin snippet: js hide: false console: true babel: true -->
<!-- language: lang-js -->
const useGenerateButtonAndLabel = step => {
const [counter, mySetCounter] = React.useState(0);
const onclick = React.useCallback(
() => mySetCounter(counter + step),
[step, counter]
);
return [
<button onClick={onclick}>+{step}</button>,
<label> {counter}</label>
];
};
function App(props) {
const [button1, label1] = useGenerateButtonAndLabel(5);
const [button2, label2] = useGenerateButtonAndLabel(10);
const [button3, label3] = useGenerateButtonAndLabel(15);
return (
<div>
{button1}
{button2}
{button3}
<br />
{label1}
{label2}
{label3}
</div>
);
}
ReactDOM.render(<App />, document.getElementById('demo'));
<!-- language: lang-html -->
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="demo"></div>
<!-- end snippet -->
If you also need a total, each generated pair can also return it's current `counter`, and you can sum them in the parent. In this example, I also automate the items creation/rendering with `Array.from()`, map, and reduce.
<!-- begin snippet: js hide: false console: true babel: true -->
<!-- language: lang-js -->
const useGenerateButtonAndLabel = step => {
const [counter, mySetCounter] = React.useState(0);
const onclick = React.useCallback(
() => mySetCounter(counter + step),
[step, counter]
);
// step is used here is a key, but if step is not unique, it will fail. You might want to generate a UUID here
return [
<button key={step} onClick={onclick}>+{step}</button>,
<label key={step}> {counter}</label>,
counter
];
};
const sum = items => items.reduce((r, [,, counter]) => r + counter, 0);
function App(props) {
const items = Array.from({ length: 5 },
(_, i) => useGenerateButtonAndLabel(5 * (i + 1))
);
return (
<div>
{items.map(([button]) => button)}
<br />
{items.map(([, label]) => label)}
<div>Total: {sum(items)}</div>
</div>
);
}
ReactDOM.render(<App />, document.getElementById('demo'));
<!-- language: lang-html -->
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="demo"></div>
<!-- end snippet -->
