Если я правильно понял вопрос, то у этой проблемы два решения. props, которые ты получаешь в компоненте Maincont - это объект, у которого должно быть поле product (если верить этой записи
<Maincont product={product}/>). Значит, чтобы получить name и price объекта product - нужно просто обратиться к ним: props.product.name и props.product.price. Но есть более практичный способ - с помощью деструктуризации ты можешь передавать в props в виде {product}. Теперь ты можешь в компоненте обращаться непосредственно к своему объекту product -
function Maincont({product}){...}. Но было бы еще логичнее в данной ситуации передавать не объект продукт, а его поля!
<Maincont name={product.name} price={product.price}/>
, а сам компонент будет выглядеть вот так:
function Maincont({name, price}){...}
И последнее - чтобы еще круче это записать передавать пропсы можно также с помощью деструктуризации вот так:
<Maincont {...product} />. Правда при таком подходе ты передаешь все поля объекта, а в компоненте похоже используются только два, так что самый логичный вариант -
<Maincont name={product.name} price={product.price}/>