0

I am using a List provided by react-virtualized. Inside the rowRenderer I return a more complex component. This component has some events defined for it. When an event is triggered, a part of the this component should be updated with new structure, e.g. a new input is rendered inside the row. This doesn't not seem to work when used inside the List.

<List height={height} width={1800} rowCount={this.state.leads.length} rowHeight={rowHeight} rowRenderer={this.rowRenderer} />

Here's the rowRenderer:

rowRenderer(props) {

let opacityvalue = 1
if (this.state.deleted.indexOf(props.index) >= 0) {
    opacityvalue = 0.3
}

return (
            <LeadItem {...props}
            lead={this.state.leads[props.index]}
            leadKey={props.index}
            ...
            />
)}

Here's the element that should show up when a specific event is triggered:

{self.props.lead.show ? <Selectize
                        queryfield={'tags'}
                        handleChange={(e) => this.props.updateLeadData(self.props.leadKey, 'tags', 'update', e)}
                        value={self.props.lead.tags}
                        create={false}
                        persist="false"
                        multiple
                        options={self.props.TAGS}
                    /> : <div>{taglist}</div>}

EDIT: Here's a simple example where I prove my point. https://codesandbox.io/s/2o6v4my7pr When user presses on the button, there must appear a new element inside the row.

UPDATE: I see now that it's related to this: https://github.com/bvaughn/react-virtualized#pure-components

elena
  • 3,740
  • 5
  • 27
  • 38
  • This question might not provide enough context to answer. "does not seem to work" is a pretty vague description. Can you provide a CodeSandbox example? – bvaughn Jan 05 '18 at 16:49
  • @brianvaughn I've updated the question with the link. – elena Jan 08 '18 at 08:21

1 Answers1

0

I think you can achieve what you're trying to do by passing through this property to List as mentioned in the docs:

<List
  {...otherListProps}
  displayDiv={this.state.displayDiv}
/>
bvaughn
  • 13,300
  • 45
  • 46