0

I am trying to pass custom props to a child component. They ara defined in the parent component and show in the React tools but are undefined in the child component.

class App extends Component {
    render() {
        return (
            <div>    
                <ReactiveBase
                    app="galnet2"
                    url="http://192.168.0.10:9200"
                >
                ... other components... 
                <ReactiveComponent
                    ComponentId='wrapper'
                    fieldName = 'publication_date'
                    startDate = '3303-01-01'
                    endDate = '3305-12-12'
                    childId = 'galnetDateRange'
                    defaultQuery={() => ({
                        query: {
                          match_all: { }
                        }
                    })}
                    render = {({fieldName, childId, startDate, endDate}) => (
                        <GalNetDateRange
                            fieldName={fieldName}
                            childId={childId}
                            startDate={startDate}
                            endDate={endDate}

                        />
                    )}
                 />

                 <Results />
                 </ReactiveBase>
                 </div>
            );
        }
    }
    export default App;

There is also GalNetDataRange:

class GalNetDateRange extends Component {
         constructor(props) {
             super(props);
             this.handleStartChange = this.handleStartChange.bind(this);
             this.handleEndChange = this.handleEndChange.bind(this);
             this.onValuesChangeFinish = this.onValuesChangeFinish.bind(this);
         };
         ... function definitions...
         render() {
             return (
                 <div>
                     <input type="text" value={this.props.startDate} onChange={this.handleStartChange} />
                     <input type="text" value={this.props.endDate} onChange={this.handleEndChange} />
                     <div onClick={this.onValuesChangeFinish(this.startDate, this.endDate)}>Set</div>
                 </div>
             );
         }
     }

    GalNetDateRange.propTypes = {
        childId: PropTypes.string.isRequired,
        fieldName: PropTypes.string.isRequired,
        startDate: PropTypes.string.isRequired,
        endDate: PropTypes.string.isRequired
    };

    export default GalNetDateRange;`
B--rian
  • 5,578
  • 10
  • 38
  • 89

0 Answers0