在地图内有条件地渲染对象的一部分 onClick (REACT.js)

Question

I am trying to conditionally render part of an object (user comment) onClick of button.

The objects are being pulled from a Firebase Database.

I have multiple objects and want to only render comments for the Result component I click on.

The user comment is stored in the same object as all the other information such as name, date and ratings.

My original approach was to set a boolean value of false to each Result component and try to change this value to false but cannot seem to get it working.

Code and images attached below, any help would be greatly appreciated.

{
accumRating: 3.7
adheranceRating: 4
cleanRating: 2
date: "2020-10-10"
place: "PYGMALIAN"
staffRating: 5
timestamp: t {seconds: 1603315308, nanoseconds: 772000000}
userComment: "Bad"
viewComment: false
}

    const results = props.data.map((item, index) => {
        return (
            <div className='Results' key={index}>
                <span>{item.place}</span>
                <span>{item.date}</span>
                <Rating
                    name={'read-only'}
                    value={item.accumRating}
                    style={{
                        width: 'auto',
                        alignItems: 'center',
                    }}
                />

                <button>i</button>
                {/* <span>{item.userComment}</span> */}

            </div >
        )
    })

Answer 1

You have to track individual state of each button toggle in that case.

The solution I think of is not the best but you could create a click handler for the button and adding a classname for the span then check if that class exists. If it exists then, just hide the comment. Just make sure that the next sibling of the button is the target you want to hide/show

const toggleComment = (e) => {
  const sibling =  e.target.nextElementSibling;
  sibling.classList.toggle('is-visible');
  
  if (sibling.classList.contains('is-visible')) {
    sibling.style.display = 'none'; // or set visibility to hidden
  } else {
    sibling.style.display = 'inline-block'; // or set visibility to visible
  }
}

<button onClick={toggleComment}>i</button>
<span>{item.userComment}</span>

Answer 2

You can try like this:

const [backendData, setBackendData] = useState([]);

...

const showCommentsHandler = (viewComment, index) => {
      let clonedBackendData = [...this.state.backendData];
      clonedBackendData[index].viewComment = !viewComment;

      setBackendData(clonedBackendData);

    }

....
return(
   <div>
    ....
    <button onClick={() => showCommentsHandler(item.viewComment, index)}>i</button>
    {item.viewComment && item.userComment}
  <div>

Answer 3

You can store an array with that place s which are clicked, for example:

const [ selectedItems, setSelectedItems] = React.useState([]);

const onClick = (el) => {
   if (selectedItems.includes(el.place)) {
     setSelectedItems(selectedItems.filter(e => e.place !== el.place));
   } else {
     setSelectedItems(selectedItems.concat(el));
   }
}

and in your render function

const results = props.data.map((item, index) => {
        return (
            <div className='Results' key={index}>
                <span>{item.place}</span>
                <span>{item.date}</span>
                <Rating
                    name={'read-only'}
                    value={item.accumRating}
                    style={{
                        width: 'auto',
                        alignItems: 'center',
                    }}
                />

                <button onClick={() => onClick(item)}>i</button>
{ /* HERE */ }
                { selectedItems.includes(item.place) && <span>{item.userComment}</span> }

            </div >
        )
    })

Answer 4

You need to use useState or your component won't update even if you change the property from false to true.

In order to do so you need an id since you might have more than one post. (Actually you have a timestamp already, you can use that instead of an id.)

const [posts, setPosts] = useState([
    {
      id: 1,
      accumRating: 3.7,
      adheranceRating: 4,
      cleanRating: 2,
      date: "2020-10-10",
      place: "PYGMALIAN",
      staffRating: 5,
      timestamp: { seconds: 1603315308, nanoseconds: 772000000 },
      userComment: "Bad",
      viewComment: false
    }
  ]);

Create a function that updates the single property and then updates the state.

const handleClick = (id) => {
    const singlePost = posts.findIndex((post) => post.id === id);
    const newPosts = [...posts];
    newPosts[singlePost] = {
      ...newPosts[singlePost],
      viewComment: !newPosts[singlePost].viewComment
    };
    setPosts(newPosts);
  };

Then you can conditionally render the comment.

return (
      <div className="Results" key={index}>
        <span>{item.place}</span>
        <span>{item.date}</span>
        <Rating
          name={"read-only"}
          value={item.accumRating}
          style={{
            width: "auto",
            alignItems: "center"
          }}
        />

        <button onClick={() => handleClick(item.id)}>i</button>
        {item.viewComment && <span>{item.userComment}</span>}
      </div>
    );

Check this codesandbox to see how it works.