React call a component with onclick

See more:

Javascript

jQuery

ReactJS

Hi all great programmers
thanks for reading my question. My problem in react language is I want to call another component by one click.
if you see code I have provided the necessary explanations with //*******

<pre>class CategoryList extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            id: 0, name: "", title: "", description: "", subTitle: "", imagePath: "", tags: "",
            data: [],
            pageInfo: []
        };
    }

    componentDidMount() {
// read data is ok
    }

    renderCategories() {
// this function is ok
        return this.state.data.map(category => {
            return (
                <tr id={"one-row-" + category.id} key={category.id}>
                    <td>{category.id}</td>
                    <td>{category.name}</td>
                    <td>{category.title}</td>
                    <td>{category.description}</td>
                    <td>
                        <a className="btn btn-primary btn-sm" data-toggle="modal" href="#edit-modal" title="EDIT" onClick={(e) => this.editCategory(category)}>
                            
                            EDIT</a>
                    </td>
                </tr>
            )
        })
    }

    render() {
// this function is ok
        var ReturnView =
            <div>
                <h1 className="text-center">Categories</h1>
                <hr />
                <table className="table table-bordered table-striped table-hovered table-sortable">
                    <thead>
                        <tr>
                            <th>id</th>
                            <th>name</th>
                            <th>title</th>
                            <th>desc</th>
                        </tr>
                    </thead>

                    <tbody>
                        {this.renderCategories()}
                    </tbody>
                </table>
            </div>
        return (
            ReturnView
        );
    }


    editCategory(category) {
        this.setState({
            id: category.id,
            name: category.name,
            title: category.title,
            description: category.description,
            subTitle: category.subTitle,
            imagePath: category.imagePath,
            tags: category.tags,
        }, function () {
// ***************** All My Problems is here *****************
 Category Edit  Component must call here 
        });
    }
}

ReactDOM.render(
    <CategoryList subreddit="catgories" />,
    document.getElementById('root')
);

the second component is here and i need call that and send parameters into that category edit component for rendering:

class CategoryEdit extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            id, name, title, description, subTitle, imagePath, tags
        };
    }

    componentDidMount() {
  //READ DATA FROM SERVER and work
    }

    render() {
        return (
           // CREATE UI and work
        )
    }

    editRow() {
        var id = this.state.id;
        var name = $("#edit-name").val();
        var title = $("#edit-title").val();
        var description = $("#edit-description").val();
        var subTitle = $("#edit-subTitle").val();
        var imagePath = $("#edit-imagePath").val();
        var tags = $("#edit-tags").val();
        $.ajax({
            url: "http://localhost:49384/api/CategoryEdit",
            method: "POST",
            data: {"Id":id, "Name": name, "Title": title, "Description": description, "SubTitle": subTitle, "ImagePath": imagePath, "Tags": tags },
            dataType: "json",
            success: function (result) {
                if (result != null) {
                    alert(result.message);
                    if (result.isSuccess === true) {
                        this.setState({
                            id: id, name: name, title: title, description: description,
                            subTitle: subTitle, imagePath: imagePath, tags: tags
                        });
                    }
                }
            }
        });
    }
}

ReactDOM.render(
    <CategoryEdit />,
    document.getElementById('pop-up-content')
)

What I have tried:

1 :

editCategory(category) {
        this.setState({
            id: category.id,
            name: category.name,
            title: category.title,
            description: category.description,
            subTitle: category.subTitle,
            imagePath: category.imagePath,
            tags: category.tags,
        }, function () {
            <CategoryEdit props="this.state" />
        });
    }

2 :

editCategory(category) {
     this.setState({
         id: category.id,
         name: category.name,
         title: category.title,
         description: category.description,
         subTitle: category.subTitle,
         imagePath: category.imagePath,
         tags: category.tags,
     }, function () {
         ReactDOM.render(
             <CategoryEdit props="this.state" />,
             document.getElementById('pop-up-content')
         );
     });
 }