components: "Results{List,Grid}.renderElement" should be rendered as a React component

[slint]

props.renderElement should render a component in the following fashion:

  _renderElement(results) {
    const _results = results.map((result, index) =>
      <this.renderListItem result={result} index={index} />
    );
    return (
      <Item.Group divided relaxed link>
        {_results}
      </Item.Group>
    );
  }

This would allow e.g. for custom components with their own internal state to be passed.

The concrete use-case is that we have a search page where each list item has Accept/Reject buttons, that when clicked make an AJAX HTTP request and on a successful response they show a result message and disable the buttons:

const ResultsItemTemplate = ({ record, index }) => {
  const [result, setResult] = useState({ message: null, status: null });

  function handleRequest(action) {
    axios
      .post(`/communities/${record.id}/${action}`)
      .then((response) => {
        setResult({ message: response.data.message, status: action });
      })
      .catch((error) => {
        setResult({ message: error.data.message, status: null });
      });
  }

  return (
    <Item key={index}>
      <Item.Content>
        <Item.Header>{record.title}</Item.Header>
        <Item.Description>
          <Button
            className={result.status ? "disabled" : null}
            onClick={() => handleRequest("accept")}
          >
            Accept
          </Button>
          <Button
            className={result.status ? "disabled" : null}
            onClick={() => handleRequest("reject")}
          >
            Reject
          </Button>
          {result.status ? <span>{result.message}</span> : null}
          <div></div>
        </Item.Description>
      </Item.Content>
    </Item>
  );
};

[zzacharo]

@slint doing something like this doesn't work?

renderListItem = (result, index) => <MyCustomComponent result={result} index={index} />

[zzacharo]

For the renderElement prop I created an issue https://github.com/inveniosoftware/react-searchkit/issues/114 that give's another reason on why should be rendered as a component.

[mvidalgarcia]

I think this doesn't apply anymore and can be closed.