Victory-native: Warning: Failed prop type: The prop `d` is marked as required in `Path`, but its value is `null`

[cvarley100]

I can't seem to work out the root cause of this warning message. Any ideas?

Warning: Failed prop type: The prop d is marked as required in Path, but its value is null.
in Path (at curve.js:18)
in _class (at victory-line.js:13)
in RNSVGGroup (at G.js:20)
in G (at victory-clip-container.js:17)
in RNSVGGroup (at G.js:20)
in G (at victory-clip-container.js:15)
in VictoryClipContainer (at victory-line.js:16)
in VictoryLine (at balance.js:224)
in RNSVGSvgView (at Svg.js:80)
in Svg (at victory-container.js:82)
in RCTView (at View.js:132)
in View (at victory-container.js:81)
in VictoryContainer (at victory-chart.js:13)
in VictoryChart (at balance.js:218)
in RCTView (at View.js:132)
in View (at balance.js:217)
in RCTView (at View.js:132)
in View (at balance.js:183)
in Balance (at index.ios.js:43)
in RCTView (at View.js:132)
in View (at index.ios.js:139)
in RCTView (at View.js:132)
in View (at index.ios.js:133)
in RCTView (at View.js:132)
in View (at index.ios.js:131)
in BVLinearGradient (at index.ios.js:71)
in LinearGradient (at index.ios.js:130)
in IOTAWallet (at renderApplication.js:35)
in RCTView (at View.js:132)
in View (at AppContainer.js:98)
in RCTView (at View.js:132)
in View (at AppContainer.js:97)
in AppContainer (at renderApplication.js:34)

[JCMais]

Had same problem, this can happen if you try to use/draw a VictoryLine with only one data point.

It's not really an issue with the library, but the message could be made clearer.

[Hektar90]

I get this warning when the data object is kept in my react state.
this.setState({ data: dataFromAPI });

```
data={this.state.data}
style={{ data: { fill: "#3498db" } }}
x="title"
y="altitude"
/>

[danicoolio]

@Hektar90 What I personally did to make this go away was to pass some placeholder data to it initially, and set the opacity of a VictoryLine/Area/whatever you're passing data to) to 0 until the actual data has been loaded, then set opacity to 1.
While the data is loading I put a loading animation on it.

[jSkrills]

@danieldelouya What kind of placeholder data did you pass in? I try setting up some placeholder data like the following, but I still see the warnings

constructor(props) {
    super(props);
    this.state = {
        myData: [
            { timeUnit: 20, strength: 5 },
            { timeUnit: 21, strength: 5 },
        ]
    };
}

[danicoolio]

@JakeNolan That seems right. I assume timeUnit and strenght is the same data you set when you have it, correct?
Or perhaps you're setting myData to [] somewhere? Make sure you set set the data when you're sure it's there. If you're already doing that, can you show me more of your code?

[jSkrills]

@danieldelouya Sure, I am using redux with react, I am not sure if you're familiar with it but ask away if you have questions. Basically my reducer populates this.props.habits near the bottom of the file in the mapStateToProps and componentWillRecieveProps picks that up and calls createDataSource with the data and I update the component state. That all works fine my line chart gets the data it should but I still see the annoying error messages.

class LineChart extends Component {

constructor(props) {
    super(props);
    this.state = {
        myData: [
            { timeUnit: 20, strength: 5 },
            { timeUnit: 21, strength: 5 },
        ]
    };
}

componentWillMount() {
    const { deliverableID } = this.props;

    this.props.habitStrengthFetch({ deliverableID, timeUnit: 'days' });

    this.createDataSource(this.props);
}

componentWillReceiveProps(nextProps) {
    this.createDataSource(nextProps);
}

createDataSource({ habits }) {
    this.setState({ myData: habits });
}


render() {
    return (
        <View>
            <VictoryChart theme={VictoryTheme.material}>
                <VictoryLabel text='Habit Strength' x={225} y={30} textAnchor='middle' />
                <VictoryAxis
                    dependentAxis
                    tickFormat={(y) => (`${y}%`)}
                />
                <VictoryAxis />
                <VictoryLine
                    style={{
                        data: { stroke: '#c43a31' },
                        parent: { border: '1px solid #ccc' }
                    }}
                    data={this.state.myData}
                    x="timeUnit"
                    y="strength"
                    domain={{ y: [0, 100] }}

                />

            </VictoryChart>
        </View>
    );
}

}

const mapStateToProps = state => {
const habits = state.strength;

return { habits };

};

export default connect(mapStateToProps, { habitStrengthFetch })(LineChart);

[danicoolio]

@JakeNolan I use Redux too. Can you show me your reducer file?

[danicoolio]

@JakeNolan My guess is you're setting the date in there to [] when it's called. Just comment that out, and it won't set the data until the call has finished and you have the loaded data.

[danicoolio]

@JakeNolan Oh wait. I know what it is now. In comonentWillReceiveProps you need to check if the data is in nextProps. It gets called more than once, so do a check there and that should solve it

[jSkrills]

@danieldelouya You pointed me down the right path. When I was calling createDataSource from the componentWillMount I was setting myData to an empty array because this.props was nothing at that point. So I just slapped that check in the createDataSource and that resolved it. Thanks so much for your timely responses and help in general!

[danicoolio]

@JakeNolan Awesome! Glad I could help :)

[JulianKingman]

@boygirl why do lines and areas require more than 1 data point?

[boygirl]

@cvarley100 Lines and areas require more than one data point, because, mathematically speaking, at least two points are required to define a line. If you would like to render a point when your data is just a single value, I suggest something like:

<VictoryChart>
{ myData.length > 1 ? 
  <VictoryLine data={myData} {...myOtherProps}/> :
  <VictoryScatter data={myData} {...myOtherProps}/>
}
</VictoryChart>