title: How to dispatch Redux action without "onClick"?
body: <p>For the below line of code, how can I dispatch <code>notificationsStateUpdate</code> without <code>onClick</code>? I want this action to be dispatched if <code>notificationClicked</code> is true, so I currently have a ternary expression set up.</p>
  <p>However, I can't seem to get the syntax to work. Is it possible to dispatch in this scenario?</p>
  <pre class="lang-js prettyprint-override"><code>{notificationClicked ?  
  &lt;NotificationList 
      notifications={newNotifications} /&gt; 
      dispatch(notificationsStateUpdate({newNotifications})) 
  : null}
  </code></pre>
  <p><strong>Full code for context</strong></p>
  <pre class="lang-js prettyprint-override"><code>import React, { useState, useEffect, useRef } from 'react';
  import { useSelector, useDispatch, connect } from 'react-redux';
  import _ from 'lodash';
  import {makeStyles, useTheme} from '@material-ui/core/styles';
  import usePrevious from '../hooks/usePrevious';
  import NotificationList from './NotificationList';
  import { notificationsStateUpdate } from '../actions';
  
  export default function Notifications(props) {
    const [newNotifications, setNewNotifications] = useState([]);
    const users = useSelector(state =&gt; state.users);
    const notificationClicked = useSelector(state =&gt; state.notificationClicked)
    const prevUsers = usePrevious(users);
    const dispatch = useDispatch();
    console.log('inside', users);
  
    const isEqual = _.isEqual(prevUsers, users);
    const timestamp = !isEqual ? new Date().getTime() : new Date(&quot;1991-09-24&quot;).getTime();
  
    useEffect(() =&gt; {
      const notifications = [];
      console.log('users', users);
      users.forEach((user) =&gt; {
        if (user.uid === props.uid &amp;&amp; user.posts) {
  
          user.posts.forEach((postContent) =&gt; {
                const likes = postContent.like ? Object.values(postContent.like) : null
                const comments = postContent.comments_text ? Object.values(postContent.comments_text) : null
  
                if (likes){
                  let filtererdLikes = likes.filter(post =&gt; {
                    return post.like_notification === false
                  })
                  notifications.push(filtererdLikes)
                }
  
                if (comments){
                  let letfilteredComments = comments.filter(post =&gt; {
                    return post.comment_notification === false
                  })
                  notifications.push(letfilteredComments)
                }
  
          })
        }
      });
      const notificationsDataClean = notifications.flat(Infinity)
      setNewNotifications(notificationsDataClean);
    }, [timestamp]);
  
    const useStyles = makeStyles((theme) =&gt; ({
      body: {
        margin: '25',
        background: '#3f51b5'
      },
      iconButton: {
        position: 'relative',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        width: 50,
        height: 50,
        color: '#333333',
        background: '#dddddd',
        border: 'none',
        outline: 'none',
        borderRadius: '50%',
        '&amp;:hover': {
          cursor: 'pointer'
        },
        '&amp;:active': {
          background: '#cccccc'
        }
      },
      iconButton__badge: {
        position: 'absolute',
        top: -10,
        right: -10,
        width: 25,
        height: 25,
        background: 'red',
        color: '#ffffff',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        borderRadius: '50%'
      }
  }
  ));
  
  const classes = useStyles();
  const theme = useTheme();
  
    return (
      &lt;div&gt;
        &lt;head&gt;
          &lt;meta charset=&quot;UTF-8&quot; /&gt;
          &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot; /&gt;
          &lt;title&gt;Icon Button Notification Badge&lt;/title&gt;
          &lt;link href=&quot;https://fonts.googleapis.com/icon?family=Material+Icons&quot; rel=&quot;stylesheet&quot; /&gt;
        &lt;/head&gt;
  
        &lt;body className={classes.body}&gt;
          &lt;button type=&quot;button&quot; className={classes.iconButton}&gt;
            &lt;span class=&quot;material-icons&quot;&gt;notifications&lt;/span&gt;
            &lt;span className={classes.iconButton__badge}&gt;{newNotifications.length}&lt;/span&gt;
          &lt;/button&gt;
        &lt;/body&gt;
        {notificationClicked ?  &lt;NotificationList notifications={newNotifications} /&gt; dispatch(notificationsStateUpdate({newNotifications})) : null}
      &lt;/div&gt;
    );
  }
  </code></pre>