Develop Reference

I'm making a forum builder using react-beautiful-dnd I have an object who has id and name and content I want only the content to be dragged

Hello dear community I'm working on Form builder using react-beautiful dnd and I'm trying at the first time to drag only the content but on the list the name will be displayed here is the code if someone can help me
import React from "react";
import Review from "./Review";
import { useState, useEffect } from "react";
import { DragDropContext, Draggable, Droppable } from "react-beautiful-dnd";
const data = [
{
name: "Input",
id: "1",
content: <input type="text" />,
},
{
name: "Button",
id: "2",
content: <button>I'm a button</button>,
},
{
name: "Image",
id: "3",
content: (
<img src="https://static.wikia.nocookie.net/adventuretimewithfinnandjake/images/e/e6/Site-logo.png/revision/latest?cb=20210530110654" />
),
},
{
name: "Select",
id: "4",
content: (
<select>
<option>Op1</option>
<option>Op2</option>
</select>
),
},
];
const reOrder = (list, startIndex, endIndex) => {
const result = Array.from(list);
const [removed] = result.splice(startIndex, 1);
result.splice(endIndex, 0, removed);
return result;
};
function App() {
const [items, setItems] = useState([]);
useEffect(() => {
setItems(data);
}, []);
const onDragEnd = (result) => {
if (!result.destination) {
return;
}
const reOrderedItems = reOrder(
items,
result.source.index,
result.destination.index
);
console.log(reOrder);
setItems(reOrderedItems);
};
return (
<main>
<section className="container">
<DragDropContext onDragEnd={onDragEnd}>
<Droppable droppableId="dragdr">
{(provided, snapshot) => (
<div {...provided.droppableProps} ref={provided.innerRef}>
{items.map((item, index) => (
<Draggable key={item.id} draggableId={item.id} index={index}>
{(provided, snapshot) => (
<div
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
>
<div className="item">
<div>{item.name}</div>
</div>
</div>
)}
</Draggable>
))}
</div>
)}
</Droppable>
</DragDropContext>
</section>
</main>
);
}
export default App;
I 'll be so greatful if someone can change my dragging behaviour from name to content and thank you in advance

looping over two arrays in react

So i have two map() blocks and 1st block is part of 2nd one, but i dont want 1st map() to affect 2nd one. How to accomplish that?
I'm new in JS and React. Thank you!
const Ciklogen = () => {
links.map((h) => {
console.log(h.heading, h.text, h.url)
return (
<>
<h3 className='heading'>{h.heading}</h3>
<p className='kratak-opis'>{h.text}</p>
<a href={h.url}>
<button className='read-more'>Read more</button>
</a>
</>
)
})
return (
<>
<Navigation logo={logo} links={links} />
{cssClass.map((style) => {
return (
<div key={style.id} className={`bg-image ${style.name}`}>
<div className='bg-text'>{ **1st block should be here**} </div>
</div>
)
})}
</>
)
}
export default Ciklogen

Trying to wrap second map method in a row DIV but i keep getting unexpected token error

{middleMenu.map((column) => {
return (
<div className="row">
column.map((item) => {
const { title, image, path } = item;
return (
<ul className="footer-collections">
<MenuLinks title={title} image={image} path={path} />
</ul>
);
})
</div>
);
})}
Does anyone know what the solution is? My first time using 2D Arrays

use :
<div className="row">
{column.map((item) => {
const { title, image, path } = item;
return (
<ul className="footer-collections">
<MenuLinks title={title} image={image} path={path} />
</ul>
);
})}
</div>

How can I pass the Child name prop to Parent array

I have a list of Child objects mapped from my Parent component in my React App.
When a Child item is clicked, I need the props.name of that item to be pushed to the selectedItems array in the Parent component via the handleClick function.
How can I achieve this?
function Parent() {
let selectedItems = [];
const result = Data.filter((e) => selectedItems.includes(e.id));
return (
<div className="App">
<main className="products-grid flex flex-wrap">
{Data.map((item, i) => {
return <Child
key={item.id}
name={item.name} />
})}
</main>
</div>
);
}
export default App
const Child = (props) => {
const [clickCount, setClickCount] = useState(0);
function handleClick() {
setClickCount(prevClickCount => prevClickCount + 1);
}
return (
<div
className="product"
onClick={() => handleClick()}
>
<p>{props.name}</p>
<p>{clickCount > 0 ? <p>Selected: {clickCount}</p> : <p>Not Selected</p>}</p>
<img src={props.img} alt="" />
</div>
);
}

I would recommend using hooks for the 'selectedItems' in the parent component, as to trigger a re-render when the name changes.
You can pass functions from the parent to the child component using props.
Below I've passed the 'addToSelectedItems' function down to the child and triggered it in the handleClick method.
const Parent = () => {
const [selectedItems, setSelectedItems] = useState([]);
function addToSelectedItems(name){
setSelectedItems([...selectedItems, name]);
}
return (
<div className="App">
<main className="products-grid flex flex-wrap">
{Data.map((item, i) => {
return <Child
key={item.id}
name={item.name}
addToSelectedItems={addToSelectedItems}
/>
})}
</main>
</div>
);
}
export default App
const Child = (props) => {
const [clickCount, setClickCount] = useState(0);
function handleClick(name) {
setClickCount(prevClickCount => prevClickCount + 1);
props.addToSelectedItems(name);
}
return (
<div
className="product"
onClick={(props.name) => handleClick(props.name)}
>
<p>{props.name}</p>
<p>{clickCount > 0 ? <p>Selected: {clickCount}</p> : <p>Not Selected</p>}</p>
<img src={props.img} alt="" />
</div>
);
}

I'd do something like this, but I have not tested it, it might need some fine tuning
function Parent() {
let selectedItems = [];
const result = Data.filter((e) => selectedItems.includes(e.id));
const [clickCount, setClickCount] = useState(0);
function handleClick(name) {
setClickCount(prevClickCount => prevClickCount + 1);
selectedItem.push(name)
}
return (
<div className="App">
<main className="products-grid flex flex-wrap">
{Data.map((item, i) => {
return <Child
key={item.id}
name={item.name}
clickCount={clickCount}
handleClick={handleClick} />
})}
</main>
</div>
);
}
export default App;
const Child = (props) => {
let { handleClick, name, clickCount, img } = props
return (
<div
className="product"
onClick={() => handleClick(name)}
>
<p>{name}</p>
<p>{clickCount > 0 ? <p>Selected: {clickCount}</p> : <p>Not Selected</p>}</p>
<img src={img} alt="" />
</div>
);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Cleaner react code when using loops and map

I have this code working with react, and its just getting very cluttered, so I was wondering if there is a way to make this code and others that are quite similar to look cleaner.
render() {
let result = null;
var obj = this.state.welcome;
let test = null;
if (this.state.isReal) {
test = Object.entries(obj).map(([key, value], index) => {
return (
<li key={index}>
Word: "{key}" repeats: {value} times
</li>
);
});
result = (
<Aux>
<h3>Title</h3>
<ul>{test}</ul>
</Aux>
);
}
return (
<Aux>
<div className="bframe">
<div className="form" />
{result}
</div>
<Footer />
</Aux>
);
}
I was wondering if its possible to move everything before 'return' statement, preferable in a separate file. I tried making a functional component and passing props but im unable to do loops there. Any tips?

You can reduce your code to the following :
render() {
const { welcome, isReal } = this.state
return (
<Aux>
<div className="bframe">
<div className="form" />
{isReal &&
<Aux>
<h3>Title</h3>
<ul>
{Object.entries(welcome).map(([key, value]) =>
<li key={key}>
Word: "{key}" repeats: {value} times
</li>
)}
</ul>
</Aux>
}
</div>
<Footer />
</Aux>
);
}
Do not use var, by default use const and if you want to modify your variable, use let.
You can choose to render an element or not by using the inline if : &&.
Your function is also unnecessary as it can be replaced by inline JS.
Your map can also be reduce from : x.map(a => { return <div/> } to x.map(a => <div/>.
You can also use the key of each item as the React key since they all have to be unique anyway in your object.

Maybe something like the following
const Result = ({real, welcome}) => {
if (!real) return null;
const words = Object.entries(welcome).map(([key, value], index) => <li key={index}>
Word: "{key}" repeats: {value} times
</li>
);
return (
<Aux>
<h3>Title</h3>
<ul>{words}</ul>
</Aux>
);
}
class YourComponent extends React.Component {
// ...
render() {
const {isReal, welcome} = this.state;
return (
<Aux>
<div className="bframe">
<div className="form" />
<Result real={isReal} welcome={welcome}/>
</div>
<Footer />
</Aux>
);
}
}