How to get rendered JSX in React?

Generally you want data flowing down from parents to children. If that is not an option for you, you can use Contexts: https://reactjs.org/docs/context.html. Especially check out https://reactjs.org/docs/context.html#updating-context-from-a-nested-component. In your case, MyHeader could be a Consumer of your context and update it with its height, and Fixed.Content would also be a consumer that uses the value for its offset. But in general, I'd say what you're trying to do is a bit unnatural.

You can use refs for that.

To solve your specific problem, first turn your <Container> component into a class component to be able to set a ref to it.

Then use React.forwardRef to forward the ref from the MyHeader component to the <Container> component:

const MyHeader = React.forwardRef((props, ref) => {
  return (
    <Container ref={ref} height={100}>
      Header content goes here
    </Container>
  );
});

Finally, create a ref hook in your component that renders the <Fixed> component and pass the ref to the <MyHeader> component. You can then also use the ref to set the height of the <Fixed.Content> component (or whatever you want to set), as follows:

function App () {
  const headerRef = React.useRef(null)
  return (
      <Fixed>
        <Fixed.Item>
          <MyHeader ref={headerRef} />
        </Fixed.Item>
        <Fixed.Content height={headerRef.current && headerRef.current.props.height}>
          Some content goes here
        </Fixed.Content>
      </Fixed>
  )
}

This seems to only render the <App> component once, so it should also work for server-side rendering. See the following code snippet as an example: https://codesandbox.io/s/get-height-from-header-gvvlo

You can use React Test Renderer which renders React Node to an inspectable Object tree.

import TestRenderer from 'react-test-renderer';

const height = TestRenderer.create(<MyHeader />).toTree().rendered.props.height

This way, you can get its height without second render.

function Container(props) {
  return (
    <div style={{height:props.height}}>
       your content
    </div>
  );
}

you need to pass height to Container as props which can varied dynamically.

function MyHeader() {
  return (
    <Container height="100px">
      Header content goes here
    </Container>
  );
}

for fixed also you need to pass it as props by having the height in a variable,e.g.:

function TopBar() {
  let height = '100px'
  return (
     <>
       <MyHeader height={height} />
       <FixedComponent height={height} />
     </> 
  );
}

I think you need to pass height prop from MyHeader to Fixed. And then Fixed to Fixed.Content. For example you can do similar to the following:

MyHeader.jsx

class MyHeader extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            height: 100
        }
        this.props.setHeaderOffset(this.state.height)
    }
    render() {
        return (
            <Container height={this.state.height}>
            </Container>
        )
    }
}

Fixed.jsx

class Fixed extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            headerOffset: 0
        }
        this.setHeaderOffset = this.setHeaderOffset.bind(this)
    }
    setHeaderOffset(headerOffset) {
        this.setState({
            headerOffset
        })
    }
    render() {
        return (
            <>
                <Item>
                    <MyHeader setHeaderOffset={this.setHeaderOffset} />
                </Item>
                <Content headerOffset={this.state.headerOffset}>
                    Some content goes here
                </Content>
            </>
        )
    }
}