const ChildComponent = (props) => (
<div
className={`childComponent ${props.isActive ? 'active' : ''}`}
onClick={props.onClick}
data-id={props.id}
>
<h3>{props.text}</h3>
</div>
);
const ParentComponent = ({ items }) => {
const [ active, setActive ] = React.useState(null);
const onClick = e => setActive(+e.currentTarget.dataset.id);
// или
// const onClick = e => setActive(+e.target.closest('[data-id]').dataset.id);
return (
<div>
{items.map(n =>
<ChildComponent
key={n.id}
onClick={onClick}
isActive={n.id === active}
{...n}
/>
)}
</div>
)
};
ReactDOM.render(
<ParentComponent
items={[
{ id: 69, text: 'hello, world!!' },
{ id: 187, text: 'fuck the world' },
{ id: 666, text: 'fuck everything' },
]}
/>,
document.getElementById('root')
);
<Body tmp={this.state.body.json.result} />
{this.props.tmp.map(n => <div key={n._id}>{n.name}</div>)}
const rows = useMemo(() => data.length
? data[0].arr.map((n, i) => data.map(m => m.arr[i]))
: []
, [ data ]);
<table>
<tbody>
{rows.map(n => <tr>{n.map(m => <td>{m}</td>)}</tr>)}
</tbody>
</table>
Где ошибки?
.active
недостаточно специфичен. А ещё лучше - надо было сразу скопипастить оригинал как есть, а не пытаться вносить изменения, которых не понимаете.Но выражения в моем понимании это...
по какой-то причине срабатывает только первый console.log()
{value >= 345 && value <= 500 ? <div>ничего нет</div> : null}
будет ещё больше таких промежутков
const messages = [
{
values: [ 1, 2, 4, 8, 16, 32, 64, 128, 256, 512 ],
message: 'hello, world!!',
},
{
values: [ [ 5, 15 ], [ 100, 200 ], 333, 444, 555 ],
message: 'fuck the world',
},
{
values: [ [ 50, 150 ], [ 250, 350 ], [ 666, 999 ] ],
message: 'fuck everything',
}
];
...
<div>
{messages
.filter(n => n.values.some(v => (
(v instanceof Array && v[0] <= value && value <= v[1]) ||
v === value
)))
.map(n => <div>{n.message}</div>)
}
</div>
setValue(prevValue => prevValue + number);
setValue(prevValue => (prevValue + number).slice(0, 3));