React onClick element: call another class elements

Question

I am trying to achieve a modal popup(which is stored in postview class) to appear when a onclick is called in any post on postcontainer class. I am new to react, so I would love your suggestion on improving code.

Class 1 (PostCointainer) This is main class which shows multiple post from an array. I want the modal to appear from class 2 when any post is clicked

import React, { Component, useState } from 'react';
import '../App.css';
import PostView from './PostView';
function RenderPost({posts}) {
    return (
     <div className="post-holder shadow-sm p-3 mb-4 bg-white rounded" key={posts.id} onClick={class postview class 2}>

    </div>
    );
}

const PostContainer = props => {

    const menu = props.posts.map(post => {
        return (
                <RenderPost posts={post} />
        )
    });

    return (
        <div className="container-fluid">
            <div className="row justify-content-center">
            <PostView />
               {menu}
            </div>
        </div>
    );
}

export default PostContainer;

Class 2 (post View)

class PostView extends Component {

    constructor(props) {
        super(props);
        this.state = {
            isModalOpen : true,

        }
        this.toggleModal = this.toggleModal.bind(this);
    }

    toggleModal(e) {
        e.stopPropagation()
        this.setState({
          isModalOpen: !this.state.isModalOpen
        });
    }

    render() {
        return (
    <div className="shadow-sm p-2 mb-2 bg-white">
        <div 
           className="modal"
           style={{display: this.state.isModalOpen ? 'block' : 'none' }} 
           onClick={this.toggleModal} >
            <div 
               className="modal-content" 
               onClick={ e => e.stopPropagation() }  >
               <span 
                   className="close"
                   onClick={this.toggleModal}
                >&times;
               </span>
            <div className="container">
                <h3 className="form-header">Hello</h3>

              </div>
            </div>
         </div>
    </div>
        );
    }
}
export default PostView;

arnavpanwar99 · Accepted Answer · 2020-06-01 17:29:26Z

1

This can be simply acheived by maintaining a state variabe for post click in the parent component and passing it via prop to child.

PostContainer.js

import React, { Component, useState } from 'react';
import '../App.css';
import PostView from './PostView';


const PostContainer = props => {
    const [post, setPost] = useState(false);

  function RenderPost({posts}) {
    return (
     <div className="post-holder shadow-sm p-3 mb-4 bg-white rounded" key={posts.id} onClick={setPost(posts)}>

    </div>
    );
  }


   const menu = props.posts.map(post => {
        return (
                <RenderPost posts={post} />
        )
    });

    return (
         <div className="container-fluid">
            <div className="row justify-content-center">
            <PostView post={post} />
               {menu}
            </div>
        </div>
     );
}

export default PostContainer;

Constructor function of PostView Component

constructor(props) {
    super(props);
    this.state = {
        isModalOpen : !!props.post,
    }
    this.toggleModal = this.toggleModal.bind(this);
}

And you can use the same post prop to render post in render function of your child component. Hope it helps!!

answered Jun 1, 2020 at 17:29

arnavpanwar99

3752 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user12855683 Over a year ago

the state is inside separate const and RenderPost is outside the cont, any way to pass the state as a parameter from const to function

arnavpanwar99 Over a year ago

@JRS you already have access to individual posts via the posts argument in renderPost function, we are then updating the post state using the setPost hook on every click to post which forces the modal to appear.

user12855683 Over a year ago

@amavpanwar99 please check the code in the link how to call setPost inside RenderPost function -> return -> div in the above code link provided. Thanks for you help

Collectives™ on Stack Overflow

React onClick element: call another class elements

1 Answer 1

PostContainer.js

Constructor function of PostView Component

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

PostContainer.js

Constructor function of PostView Component

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related