Question 187952 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Can we have 2 return statements in component in React js

I have one component named ShowProduct
in that I am having images of products
From CardMedia I am calling handleChalCharkha function that is defined in ShowProduct component

{value.products.map((item) => (
      <CardActionArea
        style={{
          width: "140px",
          height: "140px",
          innerWidth: "100px",
          padding: "10px",
          margin: "10px",
        }}
      >
        <CardMedia
          component="img"
          height="240"
          image={item.image}
          alt={item.id}
          title={item.name}
          sx={{ padding: "1em 1em 0 1em", height: "140px", width: "100px" }}
          onClick={(event) => handleChalCharkha(event, value.name)}
        />
           { showChalCharkha && 
         <ShowChalCharkha value={selectedMessage}></ShowChalCharkha>}
  
      </CardActionArea>
    ))}
        />

Card Media is written under return statement–>
so on clicking of images I have to render another component that is handleChalCharkha
that code is written below

const handleChalCharkha = (event, message) => {
console.log("handleChalCharkha function=>", event.target);
console.log("message", message);

// return <ShowChalCharkha value={message}></ShowChalCharkha>;
return(
  <>
  <div>
  <ShowChalCharkha value={message}></ShowChalCharkha>
  </div>
  </>
)

};

Above both code are written inside a ShowProduct component

and below is the ShowChalCharkha component

export default function ShowChalCharkha({value}) {
console.log('from show chal charkha component',value);
console.log('chal charkha is called')
}

but when I console showChalCharkha component , it is not rendering
Please suggest me what I have to do

Tags:

2

Answers


  1. 0

    Unfortunately onClick does not support rendering of components. What you can do is use the react-hooks library to help you out with your challenge.
    What you want to do is conditionally show ShowChalCharkha when the state showChalCharkha state of your ShowProduct component updates to true and hide it when it updates to false.

    To do this, within your ShowProduct component you’ll have something like this:

    import {useState} from 'react';

export default function ShowProduct() {

    const [showChalCharkha, setShowChalCharkha] = useState(false);
    const [message, setMessage] = useState('');
    //... your other business logic

    const handleChalCharkha = (event, message) => {
        //logs

        //update your component's state
        setMessage(message);
        setShowChalCharkha(true);
    }

    return (
        //...
        <CardMedia
          component="img"
          height="240"
          image={item.image}
          alt={item.id}
          title={item.name}
          sx={{ padding: "1em 1em 0 1em", height: "140px", width: "100px" }}
          onClick={(event) => handleChalCharkha(event, value.name)}
        />
        //show your Charkha component only when the state showChalCharkha is true
        { showChalCharkha &&
            <div>
                <ShowChalCharkha value={message}></ShowChalCharkha>
            </div>
        }
        //...
    )

}

    This way the ShowChalCharkha will only show when your state of ShowProduct equals to true. (Side note: when updating your states the render function gets called again)

    Login or Signup to reply.
  2. 0

    What you have doesn’t make sense since you can’t return JSX from a click handler and expect it to render. You need to modify some state that says which product was clicked, and then use that state to conditionally render what you want.

    You can think of a React component as a pure function where the state goes in and JSX comes out. You can’t have "multiple return statements". If you need to change what is output, you need to add conditionals inside the JSX, which would usually be asserting the condition on some state. Once you have that, therefore, it’s a case of changing that state to meet the condition on some user action (like in the click handler).

    We introduce selectedProductId state that holds the id of the clicked product. This defaults to null which means nothing is selected and therefore, ShowChalCharkha won’t render anywhere until something is clicked (which will set selectedProductId to the id of the clicked item) since we now conditionally render it based on this piece of state.

    Now we are storing the id of the last clicked item, we can compare in the JSX if the item currently being iterated over matches this selection, and only show the ShowChalCharkha component for the product which was clicked, and not the others.

    const ShowProduct = () => {
  const [selectedProductId, setSelectedProductId] = useState(null)

  const handleChalCharkha = (event, id) => {
    setSelectedProductId(id)
  }

  return (
    <>
      {value.products.map((item) => (
        <>
          <CardMedia
            component="img"
            height="240"
            image={item.image}
            alt={item.id}
            title={item.name}
            sx={{ padding: "1em 1em 0 1em", height: "140px", width: "100px" }}
            onClick={(event) => handleChalCharkha(event, item.id)}
          />
          {selectedProductId === item.id && (
            <ShowChalCharkha value={item}></ShowChalCharkha>
          )}
        </>
      ))}
    </>
  )
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search