Trying to create a d3 map in a reactjs component, by sending the data as prop from parent component

Question

I’m trying to create a world map with d3 in a react component. I want to send the data as a prop to the map. I believe I need to take the topoJSON file and create a geoJSON file(array) of geometries in the app component and then send this to the map component. I’m doing this with:

topojson.feature(fullTopoData, geometriesFromTheTopoData)

The looks like the converted geoJSON is an array with the necessary coordinates. I’m sending this from the parent app component to the child map drawing component.

When appending the paths to my svg in my map component it does not draw anything. The console shows that an svg been rendered but that’s it.

I used this tutorial as a basis for my file structure: http://nicolashery.com/integrating-d3js-visualizations-in-a-react-app/

This is how I’m trying to draw the map:

var svg = d3.select(elemPassedFromParent).append('svg')
    .attr('width', 760)
    .attr('height', 700)

var map = svg.selectAll('g')
    .data(dataPassedAsPropFromParent)
    .enter()
    .append('g')

var projection = d3.geo.mercator();
var path = d3.geo.path().projection(projection);

var countries = map.append('path')
    .attr('d', path)
    .attr('class', 'area')
    .attr('fill', 'red');

Am I not able to send the geo data object to the child component for rendering? Does it need to be the full topoJSON file? I’d like to keep this as reactive as possible, by solely passing data through props.