Test3_Props.cshtml

@model System.Tuple<string, string>

@{
    ViewBag.Title = "Test3_Props";
}

<h2>Test3_Props</h2>
<div id="app1"> </div>
<div id="app2"> </div>

@* React *@
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.25.0/babel.min.js"></script>

<script type="text/babel">

    function ReactComponent1(props) {
        return (
        <div>
            <p>React Component 1, from function</p>
            <p>Say: { props.msg } {props.fild} </p>
        </div>
        );
    }
    ReactComponent1.defaultProps = {fild: 25};

    class ReactComponent2 extends React.Component {
        
        constructor(props) {
            super(props);
        }
    
        render() {
            return (
            <div>
                <p>React Component 2, from class</p>
                <p>Say: { this.props.msg } {this.props.fild} </p>
            </div>
            );
        }
    }
    ReactComponent2.defaultProps = {fild: 25};

    ReactDOM.render(
        <ReactComponent1 msg ="@Model.Item1" />,
        document.getElementById("app1")
    )

    ReactDOM.render(
        <ReactComponent2 msg ="@Model.Item2" fild = "10" />,
        document.getElementById("app2")
    )

</script>