How to implement onclick in ResultCard and swap the div with another component

Question

I want to display the details of what's user clicks in the ResultCard.

I want to replace the divs contents (currently displayed results) with rendered html based on the result found in my elastic search cluster(res) when user click the url in the resultcard.

I tried adding onclick properties but nothing happens. Reactivesearch documentation don't list this attribute.

Of course, I could pass argument in the url properties of ResultCard and redirect user to another page but page would be reloaded completely (with the menus defined in index.js and the footer)

I think creating parent component with state mirroring the currently displayed children component in the div is the way to go.

But, how to run a javascript for setting the state when user click in the resultcard?

import React, { Component } from 'react';
import { ReactiveBase, CategorySearch, SingleRange, ResultCard } from '@appbaseio/reactivesearch';

class App extends Component {
  render() {
    return (
        <ReactiveBase
        app="artists"
        url="https://admin:xxxxxxx@node1.searchevolution.com:9200"
        type="_doc">
          <div style={{ display: "flex", "flexDirection": "row" }}>
            <div style={{ display: "flex", "flexDirection": "column", "width": "40%" }}>
              <CategorySearch
                componentId="searchbox"
                dataField="nom"
                categoryField="occupations.keyword"
                type="artists"
                placeholder="Search for Artists, Painter, Sculptor, Photographs"
                style={{
                  padding: "5px",
                  "marginTop": "10px"
                }}
              />

            </div>
            <ResultCard
              componentId="result"
              dataField="nom"
              title="Results"
              from={0}
              size={6}
              pagination={true}
              onclick="alert('Message à afficher');"
              react={{
                and: ["searchbox"]
              }}
              onData={(res) => {
                return {
                  image: "data:image/png;base64,iVBORw0KGgoA",
                  title: res.occupations,
                  description: res.nom,
                  url: "/details/" + res
                }
              }}
              style={{
                "width": "60%",
                "textAlign": "center"
              }}
            />
          </div>
        </ReactiveBase>
    );
  }
}

export default App;

Expected result is to change the div content with the rendered html from another component (not still coded).

Answer 1

The handler should be called onClick instead of onclick (Even though it looks like HTML, this is JSX, so handlers need to be camelCase).

Also, your code will not call alert unless you put it in curly braces (which tells JSX to execute code). One more thing: you want to wrap it in a function, otherwise the alert will be called when the component mounts, and not on a click.

onClick={() => alert('Message à afficher')}

EDIT: I think I misunderstood your question. If I'm understanding correctly, you're right and you want to handle the click in the App component. Something like this:

class App extends Component {
  state = {
    showResultCard = true,
  }

  handleClick = () => {
    this.setState({ showResultCard: false });
  }

  render() {
    <ReactiveBase>
      ...
      {this.state.showResultCard ? (
        <ResultCard onClick={this.handleClick} ... />
      ) : (
        <OtherComponent ... />
      )}
    </ReactiveBase>
  }
}

Answer 2

finally got it working by using the base component ReactiveList instead ReactiveCard.

ReactiveCard onData callback function is an object with image, title, description and url fields. No way, to return something else. No way to use onClick property.

So, better use the base component and do some html and css myself

import React, { Component } from 'react';
import { ReactiveBase, CategorySearch, SingleRange, ResultCard, ReactiveList} from '@appbaseio/reactivesearch';


class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            showResultCard : true,
        };

    }

  handleClick = () =>  {
      this.state.showResultCard ?
    this.setState({ showResultCard: false }) : this.setState({ showResultCard: true });
  }
    render() {
        return (
        <ReactiveBase
        app="artists"
        url="https://admin:xxxxxxxxxx@node1.searchevolution.com:9200"
        type="_doc">
         {this.state.showResultCard ? (
          <div style={{ display: "flex", "flexDirection": "row" }}>
            <div style={{ display: "flex", "flexDirection": "column", "width": "40%" }}>
              <CategorySearch
                componentId="searchbox"
                dataField="nom"
                categoryField="occupations.keyword"
                type="artists"
                placeholder="Search for Artists, Painter, Sculptor, Photographs"
                style={{
                  padding: "5px",
                  "marginTop": "10px"
                }}
              />

            </div>


                 <ReactiveList
                            componentId="result"
                            dataField="nom"
                            className="result-list-container"
                            size={5}
                            onData={(res) => <div>{res.nom}<button onClick={this.handleClick}>tttt</button></div>}
                            pagination
                            URLParams
                            react={{
                                and: ['searchbox'],
                            }}
                /> 
          </div> ) : (<button onClick={this.handleClick}>back</button>)}
        </ReactiveBase>
        );
    }

}

export default App;